/* =========================================================
   CHRONICLE ZERO — CSS SINGLE SOURCE OF TRUTH
   [ARCHITECTURE: THREE SANCTUARIES]
   ─────────────────────────────────────────────────────────
   0. GLOBAL BASE    — No @media. Foundation for all devices.
   1. MOBILE         — max-width: 767px
      └── LANDSCAPE    (orientation: landscape) at the BOTTOM
   2. TABLET         — min-width: 768px to max-width: 1023px
      └── LANDSCAPE    (orientation: landscape) at the BOTTOM
   3. PC             — min-width: 1024px
      └── 2K           min-width: 2560px at the BOTTOM
   ─────────────────────────────────────────────────────────
   Protocol:
   · No inter-device pollution (Option A: shared blocks duplicated)
   · Landscape ALWAYS at the BOTTOM of its Sanctuary
   · Brake System (max-width: 1200px) lives in PC Sanctuary only
   · env(safe-area-inset-bottom) → preserved inside calc()
   · !important = theme-level override only (commented inline)
========================================================= */


/* =========================================================
   00) FONTS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Alkalami&family=BBH+Bogle&family=Black+Han+Sans&family=Black+Ops+One&family=DotGothic16&family=Doto:wght@100..900&family=Lexend+Exa:wght@100..900&family=Megrim&family=Mr+Dafoe&family=Oswald:wght@200..700&family=Wallpoet&family=Zhi+Mang+Xing&display=swap');
/* Font Awesomeを読み込むための魔法の一行 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');


/* =========================================================
   01) BASE RESET
========================================================= */
html, body {
  margin: 0;
  padding: 0;
  background: #080808;
  color: #e0e0e0;
  overflow-x: clip;
  font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}

/* English text: Helvetica (Doto handled separately) */
:lang(en), [lang="en"] {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
}

/* Hide scrollbar track (scroll function preserved) */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

img { max-width: 100%; height: auto; }


/* =========================================================
   02) GLOBAL LINK COLORS
========================================================= */
body a,
body a:link,
body a:visited {
  color: #9a9a9a;
  text-decoration: none;
}
body a:hover,
body a:active {
  color: #cfcfcf;
}

/* Header / nav: always white */
.cz-site-header a,
.cz-category-nav__link,
.cz-category-nav__link:hover,
.cz-category-nav__link:visited {
  color: #fff;
}

/* Front page: date = emerald, titles = white */
.cz-front-page .cz-post-date,
.cz-front-page .cz-post-date--latest{
  color: #04ffc0;
}
.cz-front-page .cz-featured-title,
.cz-front-page .cz-latest-title,
.cz-front-page .cz-featured-title a,
.cz-front-page .cz-latest-title a,
.cz-front-page .cz-featured-title a:hover,
.cz-front-page .cz-latest-title a:hover {
  color: #fff;
}

.cz-front-page .cz-side-index__item {
    pointer-events: auto;
}

.cz-single a {
  color: #9a9a9a;
}


/* =========================================================
   03) SITE HEADER — BASE
========================================================= */
.cz-site-header {
  margin-bottom: 0;
  overflow: visible;
  background: #080808;
  color: #e0e0e0;
  padding-top: 14px;
  box-sizing: border-box;
}

.cz-site-header + * {
  margin-top: 0;
}

/* sticky: overflow:hidden on ancestor blocks sticky — clear it */
#page,
.site,
body > div {
  overflow: visible;
  max-width: 100%;
  box-sizing: border-box;
}

body.single #page,
body.single .site,
body.single main.cz-single,
body.single .cz-front-layout,
body.archive #page,
body.archive .site,
body.archive .cz-front-layout {
  overflow: visible;
}

.cz-site-header__inner {
  margin: 0;
  padding: 6px 16px 0 16px;
  display: flex;
  flex-direction: column;
}

.cz-site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  gap: 0;
}

.cz-site-branding {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 2px;
}

.cz-site-logo { max-width: 720px; }
.cz-site-logo img { display: block; width: 100%; height: auto; }

.cz-site-title {
  margin: 0;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.15;
}
.cz-site-title a { color: #fff; text-decoration: none; }

.cz-site-tagline {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  text-align: left;
  color: #f2f2f2;
}

.nav {
  display: flex;
  flex-wrap: nowrap; /* 横に並べる */
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li:not(:last-child)::after {
  content: "|";
  margin: 8px 0; /* 区切り線の前後スペース */
}

.nav a {
  text-decoration: none;
}


/* =========================================================
   04) NAVIGATION — BASE + CSS VARIABLES
   Variables are overridden in each Sanctuary block below.
   All three overrides live only in their respective Sanctuary.
========================================================= */
.cz-category-nav {
  --cz-nav-padding-top:    0;
  --cz-nav-padding-bottom: 0;
  --cz-nav-list-padding-t: 2px;
  --cz-nav-list-padding-r: 28px;
  --cz-nav-list-padding-b: 2px;
  --cz-nav-list-padding-l: 16px;

  position: sticky;
  top: 0;
  z-index: 200;
  background: #080808;
  border-bottom: 1px solid #016d77;
  padding-top: var(--cz-nav-padding-top);
  padding-bottom: var(--cz-nav-padding-bottom);
  width: 100%;
  overflow-x: visible;
}

.cz-category-nav__list {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: var(--cz-nav-list-padding-t) var(--cz-nav-list-padding-r) var(--cz-nav-list-padding-b) var(--cz-nav-list-padding-l);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,230,196,.6) transparent;
}

html body .cz-category-nav__list::-webkit-scrollbar {
  height: 4px;
}

.cz-category-nav__item { flex: 0 0 auto; }

.cz-category-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 3px 16px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.cz-category-nav__link:hover,
.cz-category-nav__link:focus-visible,
.cz-category-nav__link[aria-current="page"],
.cz-category-nav__link.is-active {
  color: #080808;
  background: #04ffc0;
  border-color: #04ffc0;
  outline: none;
}

/* Single page: nav swipe not captured by main pan-y */
body.single .cz-category-nav,
body.single .cz-category-nav__list {
  touch-action: pan-x;
}
body.single .cz-category-nav__list {
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   05) FRONT PAGE LAYOUT — BASE
   Default grid 10/80/10. Each Sanctuary overrides as needed.
========================================================= */

.cz-front-layout {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.cz-front-side {
  background: #080808;
  position: relative;
  z-index: 5;
  pointer-events: none;
}
aside.cz-front-side {
  z-index: 10;
}
aside.cz-front-side > * {
  pointer-events: auto;
}

.cz-left-rail,
.cz-rail-year,
.cz-rail-category {
  pointer-events: auto;
}

.cz-front-side--left {
  position: relative;
  border-right: 1px solid #016d77;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 14px 12px 16px 12px;
  box-sizing: border-box;
}

.cz-front-side--left::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #04ffc0;
  opacity: .65;
}

.cz-front-side--right {
  border-left: 1px solid #016d77;
}

.cz-front-main {
  box-sizing: border-box;
  padding: 30px;
  position: relative;
  z-index: 10;
  pointer-events: auto;
  touch-action: pan-y;
  min-width: 0;
  box-sizing: border-box;
}
main.cz-front-main {
  z-index: 20;
}


/* =========================================================
   06) SCROLL DOT — BASE
========================================================= */
.cz-single .cz-scroll-dot {
  display: none;
}

.cz-front-page .cz-scroll-dot {
  display: block;
  position: fixed;
  left: 0;
  top: 146px;
  width: 4px;
  height: 36px;
  background: #04FFC0;
  border-radius: 50px;
  pointer-events: none;
  z-index: 300;
  visibility: visible;
}


/* =========================================================
   07) LEFT COLUMN VERTICAL TEXT — BASE
========================================================= */

.cz-side-index__item {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: "Doto", monospace;
  font-weight: 700;
  font-size: 44px;
  letter-spacing: .12em;
  color: #fff;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 50;
}


/* フロントページ：中央ストップ設定 */
.cz-front-page .cz-side-index {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  
  /* 上の装飾を避けるためのスタート距離 */
  margin-top: 340px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
}

/* 1. レイアウト全体：左右の箱の高さを強制的に一致させてレールを作る */
.cz-single .cz-front-layout {
    display: grid;
    align-items: stretch; /* これで左カラムが記事の最後まで伸びます */
}

/* 2. サイドバーの箱：中身の移動を邪魔しない設定 */
.cz-single .cz-front-side--left {
    height: auto;
    overflow: visible; /* hiddenだとstickyが死ぬので必ずこれに */
}

/* 3. ナビを包むコンテナ：高さを100%にしてレールを完成させる */
.cz-single .cz-left-rail {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;    /* 横中央を維持 */
    justify-content: flex-start; /* 上詰めで並べる */
}

/* 4. ナビ本体：ここでようやくセンターで捕まえられるようになります */
.cz-single .cz-side-index__item {
    position: -webkit-sticky;
    position: sticky;
    
    /* 画面中央でストップ */
    top: 50%;
    transform: translateY(-50%);

    /* 初期位置を下げる（上の文字群との距離） */
    /* ここを大きくすることで「下から出てくる」感じになります */
    margin-top: 450px; 

    display: block;
    z-index: 100;
    pointer-events: auto;
}


/* =========================================================
   08) CARDS — BASE
========================================================= */
.cz-front-featured,
.cz-front-latest {
  margin: 0;
  padding: 0;
}

.cz-latest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz-latest-card,
.cz-featured-post {
  padding: 12px 0 32px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(128,128,128,.3);
  margin: 0;
}

.cz-featured-post {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cz-featured-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.cz-featured-post .cz-featured-thumb {
  flex: 0 0 auto;
  width: 50%;
  max-width: 480px;
  margin: 0 12px 0 0;
}

.cz-featured-post .cz-featured-body {
  flex: 1;
  min-width: 0;
}

.cz-featured-post .cz-featured-body .cz-post-meta {
  margin: 6px 0 10px;
}

.cz-featured-post .cz-featured-title { margin-top: 10px; }

.cz-featured-thumb,
.cz-latest-thumb {
  display: block;
  margin: 0 0 5px;
}

.cz-front-page .cz-latest-card .cz-post-meta {
  margin: 6px 0 10px;
}

.cz-front-page .cz-latest-card .cz-latest-title {
  margin-top: 10px;
}

.cz-front-page .cz-featured-excerpt,
.cz-front-page .cz-latest-excerpt {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
}

.cz-featured-thumb img,
.cz-latest-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(50vh, 420px);
  object-fit: contain;
  object-position: center top;
  border-radius: 0;
}


/* =========================================================
   09) POST META — BASE
========================================================= */
.cz-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0 10px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.cz-post-date {
  color: #04ffc0;
  font-size: 15px;
}

.cz-post-categories {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cz-post-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(224,224,224,.7);
  border-radius: 6px;
  padding: 2px 12px;
  color: #04FFC0;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

/* Front page: category left / date right / single row */
.cz-front-page .cz-post-meta {
  font-family: "Doto", sans-serif;
  font-weight: 600;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.cz-front-page .cz-post-date {
  font-family: "Doto", sans-serif;
  font-weight: 600;
  color: #04ffc0;
}

.cz-front-page .cz-post-category {
  font-family: "DotGothic16", sans-serif;
  background: transparent;
  color: #04FFC0;
  border: none !important; /* theme override: removes WP injected border */
  border-radius: 0;
  outline: none;
  box-shadow: none;
  padding: 5px 0;
}

.cz-front-page .cz-latest-card .cz-post-meta {
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  box-sizing: border-box;
}

.cz-front-page .cz-latest-card .cz-post-categories {
  margin: 0;
  flex: 0 0 auto;
}

.cz-front-page .cz-latest-card .cz-post-date {
  flex: 0 0 auto;
}


/* =========================================================
   10) TITLE STYLES — BASE
========================================================= */
.cz-featured-title,
.cz-latest-title {
  margin: 0;
  font-family: "Oswald", "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #fff;
  text-align: left;
  line-height: 1.25;
}

.cz-featured-title a,
.cz-latest-title a {
  color: #fff;
  text-decoration: none;
  line-height: 1.25;
}

/* Code prefix: no-wrap. English subtitle: block below */
.cz-front-page .cz-featured-title a,
.cz-front-page .cz-latest-title a {
  display: inline;
}

.cz-front-page .cz-featured-title .cz-title-code,
.cz-front-page .cz-latest-title .cz-title-code {
  white-space: nowrap;
}

.cz-front-page .cz-featured-title .cz-title-en,
.cz-front-page .cz-latest-title .cz-title-en {
  display: block;
  margin-top: 8px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  opacity: 0.95;
}


/* =========================================================
   11) FORCE TITLE FONT — GLOBAL OVERRIDE
========================================================= */
.cz-featured-title,
.cz-featured-title a,
.cz-latest-title,
.cz-latest-title a {
  font-family: "Oswald","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight: 700;
}

.cz-site-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.15;
}

.cz-site-sub {
  display: block;
  margin-top: 6px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 0.75em;
  letter-spacing: .04em;
  opacity: .85;
}

.cz-post-title-en {
  display: block;
  margin-top: .25em;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .9;
}

.cz-title-en {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  display: block;
  margin-top: 6px;
  font-size: 0.8em;
  opacity: 0.95;
}


/* =========================================================
   12) CZ SINGLE — LEFT RAIL
========================================================= */
.cz-single .cz-front-side--left {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 16px;
  box-sizing: border-box;
}

.cz-single .cz-left-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

.cz-single .cz-rail-afterline {
  display: contents;
}

.cz-single .cz-rail-icon {
  margin-bottom: 36px;
  font-size: 26px;
  line-height: 1;
}

.cz-single .cz-rail-home {
  display: inline-flex;
  color: #fff;
  text-decoration: none;
}

.cz-single .cz-rail-home:hover {
  opacity: .7;
}

.cz-single .cz-rail-year {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 80px;
  margin-top: 10px;
  margin-bottom: 40px;
}

.cz-single .cz-rail-year__inner {
  display: block;
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: center center;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  color: #fff;
  font-family: "DotGothic16", sans-serif;
}

.cz-single .cz-rail-category {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  color: #878787;
  margin-bottom: 18px;
  line-height: 1;
  font-family: "DotGothic16", sans-serif;
}

.cz-single .cz-rail-hook {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .08em;
  color: #fff;
  line-height: 1;
  margin-bottom: 40px;
  font-family: "DotGothic16", sans-serif;
}


/* =========================================================
   13) CZ SINGLE — POST CONTENT
========================================================= */
.cz-single .cz-breadcrumbs {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 6px 0 6px;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #9a9a9a;
}

.cz-single .cz-breadcrumbs a:link,
.cz-single .cz-breadcrumbs a:visited {
  color: #9a9a9a;
  text-decoration: none;
}

.cz-single .cz-breadcrumbs a:hover,
.cz-single .cz-breadcrumbs a:active {
  color: #cfcfcf;
  text-decoration: none;
}

.cz-single .cz-instrument-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 0 0 12px;
}

.cz-single .cz-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(252,255,92,.25);
}

.cz-single .cz-dot.active {
  background: #ECFF5C;
  box-shadow: 0 0 10px rgba(252,255,92,.6);
}

.cz-single .cz-divider {
  border: 0;
  height: 1px;
  background: #016d77;
  margin: 6px 0 10px;
}
body.single main.cz-single .cz-divider {
  margin-bottom: 10px;
}

.cz-single .cz-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 6px;
}

.cz-single .cz-category-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5vw 6vw 0.5vw 3.5vw;
  font-size: 3.7vw;
  font-weight: 700;
  color: #080808;
  background-color: #fff;

  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), calc(100% - 3vw) 100%, 0 100%);
}

.cz-single .cz-era-heading {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: #04FFC0;
  line-height: 1.1;
  font-family: "DotGothic16", sans-serif;
}

.cz-single .cz-post-title {
  margin: 14px 0 18px;
  font-family: "Oswald","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-align: left;
}

.cz-single .cz-title-en {
  display: block;
  margin-top: 8px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  opacity: .95;
  text-align: left;
}

.cz-single .cz-hero-image {
  margin: 0 0 20px;
}

.cz-single .cz-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  object-position: center top;
}

.cz-single .cz-inline-image img {
  display: block;
  width: 100%;
  height: auto;
}

.cz-single .cz-inline-image {
  margin: 20px 0 20px;
}

.cz-single .cz-post-body {
  margin: 0 0 28px;
  font-size: 20px;
  line-height: 1.9;
}

.cz-single .cz-post-body p {
  margin: 0 0 1em;
}
.cz-single .cz-post-body p:last-child {
  margin-bottom: 0;
}

.cz-geo-link {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: .2s;
}
.cz-geo-link:hover {
  color: #1de9a6;
  text-decoration: underline;
}

/* 記事エリア全体の基本色をグレーにする */
article {
    color: #e0e0e0;
}

/* 見出し（h1〜h4）だけは、個別に「純白」を強制して死守する */
h1, h2, h3, h4 {
    color: #ffffff;
}

/* 太字も「純白」を強制する */
strong, b {
    color: #ffffff;
}

.cz-single .cz-post-body h2 {
  padding: 4px 0px 0px 15px;
  margin: 20px 0 20px;
  background: linear-gradient(
    90deg,
    rgba(4,255,192,.12),
    rgba(0,0,0,0)
  );
  border-left: 3px solid #04ffc0;
  font-family: "DotGothic16", sans-serif;
}


/* 1. 見出し本体と「上」の隙間 */
.cz-single .cz-post-body h3 {
  position: relative;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: none;
  
  /* 【上の隙間】 */
  padding-top: 10px; 
  
  /* 【文字と斜線の隙間】vwをやめてpxで完全固定！ */
  padding-bottom: 24px;
  margin-bottom: 0;
}

/* 2. 斜線の設定（PCでも絶対に太くならない設定） */
.cz-single .cz-post-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; 
  width: 100%;
  
  /* 【斜線の高さと太さ】vwをやめてpxで完全固定！ */
  height: 12px; 
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 2px,         /* 斜線の太さ（2px） */
    transparent 2px, 
    transparent 6px   /* 斜線と斜線の隙間（4px） */
  );
}

/* 3. 【下の隙間】次の要素を押し下げる */
.cz-single .cz-post-body h3 + * {
  margin-top: 20px; 
}



.cz-single .cz-post-body h4 {
  margin: 28px 0 14px;
  letter-spacing: .04em;
  color: #04ffc0; /* 文字色をエメラルドに変更 */
  font-family: "DotGothic16", sans-serif;
  font-weight: bold; /* 少し太くして色を際立たせる */
}

/* ドットの装飾を消す */
.cz-single .cz-post-body h4::before {
  display: none;
}

.cz-single .cz-post-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 28px 0;
}

.cz-single .cz-post-body th,
.cz-single .cz-post-body td {
  padding: 12px 14px;
  text-align: left;
  position: relative;
}

.cz-single .cz-post-body th::after,
.cz-single .cz-post-body td::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.15),
    rgba(255,255,255,.15) 4px,
    transparent 4px,
    transparent 10px
  );
}

.cz-single .cz-post-body th::before,
.cz-single .cz-post-body td::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.08) 4px,
    transparent 4px,
    transparent 10px
  );
}

.cz-single .cz-post-body thead th {
  background: linear-gradient(
    180deg,
    rgba(1,109,119,.22),
    rgba(0,0,0,0)
  );
}


/* =========================================================
   14) CZ SINGLE — META / LINKS / TAGS / RELATED
========================================================= */
.cz-source-chip {
  font-size: 14px;
  text-decoration: none;
  color: rgba(255,255,255,.75);
  letter-spacing: .05em;
  transition: .2s ease;
}
.cz-source-chip:hover {
  color: #fff;
  opacity: .85;
}

.cz-hashtags {
  margin: 24px 0 10px;
  display: flex;
  flex-wrap: wrap;
}

.cz-hashtag {
  font-size: 16px;
  padding: 5px 10px;
  margin: 3px 5px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  text-decoration: none;
  color: rgba(255,255,255,.82);
}
.cz-hashtag:hover {
  color: #fff;
  opacity: .7;
}

.cz-single .cz-meta-links {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0 12px;
}

.cz-single .cz-meta-pill {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.cz-single .cz-meta-pill:hover {
  opacity: .8;
}

.cz-single .cz-meta-ic {
  display: inline-flex;
  opacity: .9;
}

.cz-single .cz-meta-label {
  font-weight: 700;
  color: rgba(255,255,255,.92);
  margin: 4px 0;
}

.cz-single .cz-meta-val {
  color: rgba(255,255,255,.70);
}

.cz-single .cz-tags {
  display: flex;
  flex-wrap: wrap;
  margin: 34px 0;
}

.cz-single .cz-tag {
  text-decoration: none;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.2;
}
.cz-single .cz-tag:hover {
  opacity: .8;
}

.cz-single .cz-meta-box {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #bbb;
  text-decoration: none;
  letter-spacing: .05em;
  line-height: 1.2;
}
.cz-single .cz-meta-box::before {
  content: "[";
  margin-right: 2px;
  color: rgba(255,255,255,.55);
}
.cz-single .cz-meta-box::after {
  content: "]";
  margin-left: 2px;
  color: rgba(255,255,255,.55);
}
.cz-single .cz-meta-icon { font-size: 14px; }
.cz-single .cz-meta-box:hover { color: #fff; }

.cz-single .cz-related {
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cz-single .cz-related-item {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.cz-single .cz-related-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex: 0 0 80px;
  border-radius: 8px;
}

.cz-single .cz-related-title {
  font-size: 16px;
  line-height: 1.4;
  padding-right: 16px;
}

.cz-single .cz-related-label {
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  margin: 34px 0 6px;
}


/* =========================================================
   15) GLITCH EFFECT — GLOBAL KEYFRAMES
   prefers-reduced-motion override is also global (accessibility).
========================================================= */
.cz-single .cz-title-code.cz-glitch,
.cz-front-page .cz-featured-title .cz-title-code.cz-glitch,
.cz-front-page .cz-latest-title .cz-title-code.cz-glitch {
  position: relative;
  display: inline-block;
}

.cz-single .cz-title-code.cz-glitch::before,
.cz-single .cz-title-code.cz-glitch::after,
.cz-front-page .cz-featured-title .cz-title-code.cz-glitch::before,
.cz-front-page .cz-featured-title .cz-title-code.cz-glitch::after,
.cz-front-page .cz-latest-title .cz-title-code.cz-glitch::before,
.cz-front-page .cz-latest-title .cz-title-code.cz-glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cz-single .cz-title-code.cz-glitch::before,
.cz-front-page .cz-featured-title .cz-title-code.cz-glitch::before,
.cz-front-page .cz-latest-title .cz-title-code.cz-glitch::before {
  color: #04ffc0;
  z-index: -2;
  clip-path: inset(40% 0 45% 0);
  transform: translate(-2px, 1px);
  animation: cz-glitch-1 6s ease-in-out infinite;
}

.cz-single .cz-title-code.cz-glitch::after,
.cz-front-page .cz-featured-title .cz-title-code.cz-glitch::after,
.cz-front-page .cz-latest-title .cz-title-code.cz-glitch::after {
  color: #ff04c8;
  z-index: -1;
  clip-path: inset(20% 0 60% 0);
  transform: translate(2px, -1px);
  animation: cz-glitch-2 7s ease-in-out infinite;
}

@keyframes cz-glitch-1 {
  0%   { clip-path: inset(40% 0 45% 0); transform: translate(-2px,  1px); }
  20%  { clip-path: inset(15% 0 80% 0); transform: translate( 1px, -1px); }
  40%  { clip-path: inset(70% 0 10% 0); transform: translate(-1px,  2px); }
  60%  { clip-path: inset(30% 0 55% 0); transform: translate( 2px,  1px); }
  80%  { clip-path: inset( 5% 0 85% 0); transform: translate(-2px, -2px); }
  100% { clip-path: inset(40% 0 45% 0); transform: translate(-2px,  1px); }
}

@keyframes cz-glitch-2 {
  0%   { clip-path: inset(20% 0 60% 0); transform: translate( 2px, -1px); }
  25%  { clip-path: inset(60% 0 25% 0); transform: translate(-2px,  2px); }
  50%  { clip-path: inset(10% 0 70% 0); transform: translate( 1px,  1px); }
  75%  { clip-path: inset(45% 0 30% 0); transform: translate(-1px, -2px); }
  100% { clip-path: inset(20% 0 60% 0); transform: translate( 2px, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  .cz-single .cz-title-code.cz-glitch::before,
  .cz-single .cz-title-code.cz-glitch::after,
  .cz-front-page .cz-featured-title .cz-title-code.cz-glitch::before,
  .cz-front-page .cz-featured-title .cz-title-code.cz-glitch::after,
  .cz-front-page .cz-latest-title .cz-title-code.cz-glitch::before,
  .cz-front-page .cz-latest-title .cz-title-code.cz-glitch::after {
    animation: none;
    clip-path: none;
    transform: none;
  }
}


/* =========================================================
   16) WARP OVERLAY
========================================================= */
.cz-warp {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cz-warp-inner {
  text-align: center;
  padding: 24px 18px;
  color: #fff;
  opacity: .95;
}
.cz-warp-title {
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  margin-bottom: 12px;
}
.cz-warp-counter {
  font-size: 28px;
  line-height: 1.2;
}


/* =========================================================
   17) FOOTER — BASE (mobile-first: 17.5vw / 3.5vw)
========================================================= */
.cz-site-footer {
  background-color: #04FFC0;
  color: #080808;
  width: 100%;
  padding-top: 17.5vw;
  padding-bottom: 10px;
}

.cz-footer-inner {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}

.cz-copyright {
  display: block;
  font-size: 3vw;
  line-height: 1;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Safe-area exception: env() preserved inside calc() */
body .cz-site-footer {
  margin-top: 0;
  padding-bottom: 10px;
}


/* =========================================================
   18) HIGH-SPECIFICITY COLOR LOCKS
   html body selectors override WP theme stylesheet conflicts.
   Do not reduce specificity without cross-browser testing.
========================================================= */
body .cz-site-header a,
body .cz-site-header .cz-site-title a,
body .cz-site-header .cz-site-tagline {
  color: #fff;
}

.cz-single .cz-post-title,
.cz-single .cz-post-title .cz-title-en {
  color: #fff;
}

html body .cz-category-nav .cz-category-nav__list .cz-category-nav__item a,
html body .cz-category-nav .cz-category-nav__list a.cz-category-nav__link,
html body .cz-category-nav .cz-category-nav__list .cz-category-nav__item a:visited {
  color: #fff;
  border-color: #fff;
}

html body .cz-category-nav .cz-category-nav__list .cz-category-nav__item a:hover,
html body .cz-category-nav .cz-category-nav__list a.cz-category-nav__link:hover,
html body .cz-category-nav .cz-category-nav__list a.cz-category-nav__link.is-active,
html body .cz-category-nav .cz-category-nav__list a.cz-category-nav__link[aria-current="page"] {
  color: #080808;
  background: #04ffc0;
  border-color: #04ffc0;
}

html body .cz-post-category,
html body .cz-post-category:hover,
html body .cz-post-category:visited,
html body .cz-single .cz-category-chip {
  color: #080808;
}

html body .cz-front-page .cz-post-category {
  color: #04FFC0;
  border: none !important; /* theme override */
  outline: none;
  box-shadow: none;
}


/* =========================================================
   19) TERMINAL UI — OBSERVATION PANEL
========================================================= */
.cz-rgb-split {
  display: inline-block;
  transition: text-shadow 0.12s ease-in-out;
}
.cz-rgb-split:hover {
  text-shadow:
    -0.12vw 0 0.05vw rgba(255, 0, 0, 0.75),
     0.12vw 0 0.05vw rgba(0, 255, 255, 0.75);
}

.cz-terminal-box,
.scifi-frame {
  position: relative;
  overflow: hidden;
  background: rgba(5, 12, 25, 0.95);
  height: auto;
  padding: 1.5vw;
  margin-bottom: 13px;
  border: 0.05vw solid rgba(0, 255, 255, 0.15);
  color: #e0e0e0;
}

.cz-terminal-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.2) 0.1%,
    transparent 0.1%,
    transparent 0.3%
  );
  pointer-events: none;
  z-index: 5;
}

.cz-terminal-box::after {
  content: "";
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 10%;
  background: linear-gradient(
    to bottom,
    rgba(0,255,180,0) 0%,
    rgba(0,255,180,0.05) 50%,
    rgba(0,255,180,0) 100%
  );
  animation: cz-scan-motion 10s linear infinite;
  pointer-events: none;
  z-index: 6;
}

@keyframes cz-scan-motion {
  0%   { top: -15%; }
  100% { top: 115%; }
}

/* 1. フォントと階層の復旧：名前をPHPに合わせる（色指定なし） */
.cz-query-type { 
    display: block;
    font-family: "DotGothic16", sans-serif; 
    font-size: 18px; 
    margin-bottom: 5px;
}

.cz-query-output { 
    display: block;
    font-family: "Oswald", "Noto Sans JP", sans-serif; 
    font-weight: 700; 
    font-size: 32px; 
    line-height: 1.2;
    margin: 0;
}

.cz-query-meta .cz-sync-indicator, 
.cz-query-meta .cz-match-count { 
    font-family: "Doto", monospace; 
    font-size: 12px;
    margin-right: 15px;
}

/* 2. 外枠のバランス：端に寄らない適切な余白をvwで指定 */
.cz-terminal-box {
    position: relative;
    background: rgba(5, 12, 25, 0.95);
    
    /* 左右の余白を5vwに設定し、画面端への張り付きを解消 */
    padding: 20px 5vw; 
    
    border: 1px solid rgba(0, 255, 255, 0.2);
    box-sizing: border-box;
    width: 100%;
}

/*******************************************************************************
 *
 *  ███╗   ███╗ ██████╗ ██████╗ ██╗██╗     ███████╗
 *  ████╗ ████║██╔═══██╗██╔══██╗██║██║     ██╔════╝
 *  ██╔████╔██║██║   ██║██████╔╝██║██║     █████╗
 *  ██║╚██╔╝██║██║   ██║██╔══██╗██║██║     ██╔══╝
 *  ██║ ╚═╝ ██║╚██████╔╝██████╔╝██║███████╗███████╗
 *  ╚═╝     ╚═╝ ╚═════╝ ╚═════╝ ╚═╝╚══════╝╚══════╝
 *
 *  [MOBILE SANCTUARY]
 *  Default / max-width: 767px
 *  Single column. No tablet or PC code allowed here.
 *  Landscape rules are at the BOTTOM of this section.
 *
 *******************************************************************************/

/* ── NAV VARIABLES ── */
@media (max-width: 767px) {
  .cz-category-nav {
    --cz-nav-padding-top:    6px;
    --cz-nav-padding-bottom: 6px;
    --cz-nav-list-padding-t: 0;
    --cz-nav-list-padding-r: 8px;
    --cz-nav-list-padding-b: 2px;
    --cz-nav-list-padding-l: 16px;
  }
}

/* ── SCROLL DOT ── */
@media (max-width: 767px) {
  .cz-front-page .cz-scroll-dot {
    top: 128px;
    width: 4px;
    height: 40px;
  }
  .cz-single .cz-front-side--left::after {
    width: 1px;
    opacity: .9;
  }
}


/* ── HEADER ── */
@media (max-width: 767px) {
  .cz-site-title a {
    font-size: 20px;
  }
  .cz-site-header__inner {
    padding: 6px 16px 0 16px;
    align-items: center;
    text-align: center;
  }
  .cz-site-header__top {
    flex-direction: column;
    align-items: center;
  }
  .cz-site-logo {
    max-width: min(96vw, 432px);
    margin: 0 auto 2px;
  }
  .cz-site-title {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .cz-site-tagline {
    margin: 0;
    align-self: center;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    max-width: 96vw;
    width: 100%;
  }
}


@media (max-width: 767px) {
  .cz-single .cz-rail-line {
    display: block;
    width: 2px;
    height: 30px;
    background: #fff;
    margin: 0 auto 14px;
 } 
}



/* ── LAYOUT: 14% / 86% — right rail hidden ── */
@media (max-width: 767px) {
  .cz-front-layout {
    grid-template-columns: 14% 86%;
  }
  .cz-front-side--right {
    display: none;
  }
  .cz-swipe-viewport {
    min-width: 0;
    box-sizing: border-box;
  }
  .cz-front-main {
    padding: 10px 0 20px;
    min-width: 0;
  }
  .cz-single .cz-scroll-dot {
  display: none;
  }

.cz-front-page .cz-scroll-dot {
  display: block;
  position: fixed;
  left: 0;
  top: 116px;
  width: 4px;
  height: 36px;
  background: #04FFC0;
  border-radius: 50px;
  pointer-events: none;
  z-index: 300;
  visibility: visible;
  }

}

/* ── LEFT COLUMN VERTICAL TEXT ── */
@media (max-width: 767px) {
  .cz-side-index__item {
    top: 14px;
    font-size: 20px;

  }

  .nav-list-vertical li {
    display: flex;
    flex-direction: column;
    align-items: center;    /* 斜線を文字の中央に合わせる */
    width: 100%;            /* クリックしやすくするため幅を広げる */
  }
 

 /* フロントページ：中央ストップ設定 */
.cz-front-page .cz-side-index {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  
  /* 上の装飾を避けるためのスタート距離 */
  margin-top: 230px; 
  
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
}
}

/* ── CARDS ── */
@media (max-width: 767px) {
  .cz-single-front-main{
  padding: 4px 0 24px 20px;
  }
  .cz-front-main {
  padding: 10px 12px 0;
  min-width: 0;
  }

  /* 1. 見出し本体と「上」の隙間 */
.cz-single .cz-post-body h3 {
  position: relative;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: none;
  
  /* 【上の隙間】 */
  padding-top: 15px; 
  
  /* 【文字と斜線の隙間】vwをやめてpxで完全固定！ */
  padding-bottom: 24px;
  margin-bottom: 0;
}

/* 2. 斜線の設定（PCでも絶対に太くならない設定） */
.cz-single .cz-post-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0; 
  width: 100%;
  
  /* 【斜線の高さと太さ】vwをやめてpxで完全固定！ */
  height: 12px; 
  background: repeating-linear-gradient(
    45deg,
    #fff,
    #fff 2px,         /* 斜線の太さ（2px） */
    transparent 2px, 
    transparent 6px   /* 斜線と斜線の隙間（4px） */
  );
}

/* 3. 【下の隙間】次の要素を押し下げる */
.cz-single .cz-post-body h3 + * {
  margin-top: 20px; 
}

  /* Category/date: smaller on SP */
  .cz-front-page .cz-post-date,
  .cz-front-page .cz-post-category {
    font-size: 15px;
  }
  /* Featured + latest: unified padding/border */
  .cz-front-page .cz-featured-post {
    padding: 10px 0 10px;
    border-bottom: 1px solid rgba(128,128,128,.3);
  }
  .cz-front-page .cz-latest-card {
    padding: 10px 0 10px;
    border-bottom: 1px solid rgba(128,128,128,.3);
  }
  /* Featured: thumb full-width, stack vertically */
  .cz-front-page .cz-featured-row {
    flex-direction: column;
  }
  .cz-front-page .cz-featured-post .cz-featured-thumb {
    width: 100%;
    max-width: none;
  }
  .cz-front-page .cz-featured-post .cz-featured-thumb img {
    max-height: none;
    object-fit: initial;
  }
  .cz-front-page .cz-featured-post .cz-featured-body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Latest: fixed thumb height */
  .cz-front-page .cz-latest-thumb {
    height: 280px;
    overflow: hidden;
  }
  .cz-front-page .cz-latest-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  /* Titles */
  .cz-front-page .cz-featured-post .cz-featured-title,
  .cz-front-page .cz-latest-card .cz-latest-title {
    margin-top: 14px;
    margin-bottom: 0;
    line-height: 1.25;
  }
  /* Excerpts */
  .cz-front-page .cz-featured-post .cz-featured-excerpt,
  .cz-front-page .cz-latest-card .cz-latest-excerpt {
    margin-top: 14px;
  }
  /* Title sizes: SP */
  .cz-featured-title a,
  .cz-latest-title a { font-size: 25px; }
  .cz-front-page .cz-featured-title .cz-title-en,
  .cz-front-page .cz-latest-title .cz-title-en { font-size: 20px; }
  /* Latest grid: 1 column (explicit for clarity) */
  .cz-latest-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── SINGLE PAGE ── */
@media (max-width: 767px) {
  /* Rail */
  .cz-single .cz-rail-year { height: 70px; }
  .cz-single .cz-rail-hook { font-size: 16px; }
  /* Swipe nav: no room on SP */
  .cz-single .cz-swipe-prev,
  .cz-single .cz-swipe-next { display: none !important; }
  /* Post title */
  .cz-single .cz-post-title, {
    color: #fff;
    font-size: 25px;
  }
  .cz-single .cz-title-en { font-size: 20px; }
  /* Hero / inline image */
  .cz-single .cz-hero-image img,
  .cz-single .cz-inline-image img {
    filter: saturate(.95) contrast(.98);
  }
  /* Post body */
  .cz-single .cz-post-body     { font-size: 18px; line-height: 1.7;  }
  .cz-single .cz-post-body h2  { font-size: 24px; line-height: 1.25; }
  .cz-single .cz-post-body h3  { font-size: 20px; line-height: 1.3;  }
  .cz-single .cz-post-body h4  { font-size: 18px; line-height: 1.4;  }
}

/* ── NAV ITEM WIDTHS: SP (first 4 fixed at 26vw) ── */
@media (max-width: 767px) {
  .cz-category-nav__item:nth-child(-n+4) {
    flex: 0 0 26vw;
  }
  .cz-category-nav__item:nth-child(-n+4) .cz-category-nav__link {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 767px) {
    /* サイドバー自体を記事の高さに追随させる */
    .cz-single .cz-front-layout {
        align-items: stretch;
    }

    /* 固定したい要素の「親」に overflow がないか確認し、
       高さを自動（中身に合わせて伸びる状態）にする */
    .cz-single .cz-front-side--left {
        height: auto;
        overflow: visible;
    }

    /* ナビゲーション本体の設定 */
    .cz-single .cz-side-index__item {
        position: sticky;
        top: 50vh;
        transform: translateY(-50%);
        
        display: block;
        writing-mode: vertical-rl;
        pointer-events: auto; /* クリックを有効化 */
    }
}

/* ── FOOTER ── */
@media (max-width: 767px) {
  .cz-site-footer {
    padding-top: 17.5vw;
  }
  .cz-copyright {
    font-size: 3vw;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE LANDSCAPE
   (max-width: 767px) and (orientation: landscape)
   Placed at the BOTTOM of the Mobile Sanctuary.
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) and (orientation: landscape) {

  /* Single: activate 3-column grid */
  main.cz-single .cz-front-layout {
    grid-template-columns: 14% 78% 14%;
  }
  main.cz-single .cz-front-side--right {
    display: block;
    border-left: 1px solid #016d77;
  }

  /* --two-col variant: also 3-column in landscape */
  .cz-front-layout--two-col {
    grid-template-columns: 14% 78% 14%;
  }
  .cz-front-layout--two-col .cz-front-side--right {
    display: block;
    border-left: 1px solid #016d77;
  }

  /* Single: main content padding */
  main.cz-single .cz-front-main {
    padding: 10px 12px 6px;
    min-width: 0;
  }

  /* Single: left column — reduced sizes */
  main.cz-single .cz-side-index__item {
    font-size: 16px;
    left: 50%;
    transform: translateX(-50%);
    top: 12px;
  }
  .cz-single .cz-front-side--left {
    padding-top: 8px;
  }
  .cz-single .cz-rail-icon {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .cz-single .cz-rail-year {
    width: 32px;
    height: 56px;
    margin-bottom: 20px;
  }
  .cz-single .cz-rail-year__inner {
    font-size: 11px;
  }
  .cz-single .cz-rail-line {
    margin-bottom: 10px;
  }
  .cz-single .cz-rail-category {
    font-size: 10px;
    margin-bottom: 10px;
  }
  .cz-single .cz-rail-hook {
    font-size: 14px;
  }

  /* Single: card grid (landscape compact) */
  main.cz-single .cz-latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 16px;
  }
  main.cz-single .cz-featured-post {
    flex-direction: row;
  }
  main.cz-single .cz-featured-post .cz-featured-thumb {
    width: 38%;
    max-width: 160px;
    margin: 0 10px 0 0;
  }
  main.cz-single .cz-featured-post .cz-featured-body {
    flex: 1;
    min-width: 0;
  }
  main.cz-single .cz-featured-title a,
  main.cz-single .cz-latest-title a {
    font-size: 14px;
  }
  main.cz-single .cz-front-page .cz-post-meta {
    font-size: 12px;
  }
  main.cz-single .cz-front-page .cz-post-date {
    font-size: 12px;
  }

  /* Single: typography — compact for landscape */
  .cz-single .cz-post-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .cz-single .cz-title-en {
    font-size: 14px;
  }
  .cz-single .cz-post-body {
    font-size: 15px;
    line-height: 1.75;
  }
  .cz-single .cz-breadcrumbs {
    font-size: 11px;
    padding-top: 8px;
  }
  .cz-single .cz-instrument-panel {
    padding: 0 10px 10px;
  }
  .cz-single .cz-hero-image {
    margin-top: 6px;
  }
  .cz-single .cz-meta-row {
    margin-bottom: 20px;
  }
  .cz-single .cz-related-item img {
    margin-right: 12px;
  }
  body.single .cz-site-footer {
    margin-top: 0;
  }
  .cz-single .cz-meta-row,
  .cz-single .cz-category-chip,
  .cz-single .cz-era-heading {
    font-size: 12px;
  }
}


/*******************************************************************************
 *
 *  ████████╗ █████╗ ██████╗ ██╗     ███████╗████████╗
 *     ██║   ██╔══██╗██╔══██╗██║     ██╔════╝╚══██╔══╝
 *     ██║   ███████║██████╔╝██║     █████╗     ██║
 *     ██║   ██╔══██║██╔══██╗██║     ██╔══╝     ██║
 *     ██║   ██║  ██║██████╔╝███████╗███████╗   ██║
 *     ╚═╝   ╚═╝  ╚═╝╚═════╝ ╚══════╝╚══════╝   ╚═╝
 *
 *  [TABLET SANCTUARY]
 *  min-width: 768px — max-width: 1023px
 *  No mobile or PC code allowed here.
 *  Shared TB+PC blocks are duplicated here (Option A).
 *  Landscape rules are at the BOTTOM of this section.
 *
 *******************************************************************************/

/* ── NAV VARIABLES ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-category-nav {
    --cz-nav-padding-top:    10px;
    --cz-nav-padding-bottom: 10px;
    --cz-nav-list-padding-t: 0;
    --cz-nav-list-padding-b: 0;
    --cz-nav-list-padding-r: 40px;
    --cz-nav-list-padding-l: 16px;
  }
}

/* ── SCROLL DOT ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-front-page .cz-scroll-dot {
    top: 170px;
  }
}

/* ── HEADER ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-site-header__inner {
    padding: 6px 16px 0 16px;
  }
  .cz-site-header__top {
    flex-direction: column;
    align-items: center; /* センターに修正 */
    text-align: center;
  }
  .cz-site-logo {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .cz-site-tagline {
    align-self: center;
    font-size: 26px;
    max-width: 88vw;
    text-align: center;
    line-height: 1.45;
    margin: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cz-side-index__item {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: "Doto", monospace;
  font-weight: 700;
  letter-spacing: .12em;
  color: #fff;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 50;
}


/* フロントページ：中央ストップ設定 */
.cz-front-page .cz-side-index {
  position: sticky;
  top: 50vh;
  font-size: 32px;
  transform: translateY(-50%);
  
  /* 上の装飾を避けるためのスタート距離 */
  margin-top: 370px; 
  
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 50;
 }
}

/* ── LAYOUT: 16% / 84% — right rail hidden ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-front-layout {
    grid-template-columns: 16% 84%;
  }
  .cz-front-side--right {
    display: none;
  }
  .cz-single .cz-rail-year__inner {
  display: block;
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: center center;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  color: #fff;
  font-family: "DotGothic16", sans-serif;
  }

  .cz-single .cz-category-chip {
  display: inline-flex;
  align-items: center;
  padding: 1vw 5vw 1vw 3.5vw;
  font-size: 1.3vw;
  font-weight: 700;
  color: #080808;
  background-color: #fff;

  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), calc(100% - 2vw) 100%, 0 100%);
}

  .cz-site-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  }
  .cz-site-title a { color: #fff; text-decoration: none; }
 }

/* ── LEFT COLUMN VERTICAL TEXT ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .nav a {
    font-size: 30px; /* タブレット用文字サイズ */
  }
}

/* TABLET SANCTUARY (768px-1023px) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 1. 年号の台座：ここで線との距離を調整 */
  .cz-single .cz-rail-year {
    height: 80px; 
    margin-bottom: 10px; /* 線（LINE）との隙間 */
  }
  .cz-single .cz-rail-year__inner {
    font-size: 18px; 
    font-weight: 800;
    font-family: "DotGothic16", sans-serif;
  }

  /* 2. 例のライン：年号のすぐ下 */
  .cz-single .cz-rail-line {
    display: block;
    width: 2px;
    height: 40px;
    background: #fff;
    margin: 40px auto 20px; /* 下のカテゴリーとの隙間 */
  }

  /* 3. カテゴリー */
  .cz-single .cz-rail-category {
    font-size: 18px;
    font-weight: 900;
    font-family: "DotGothic16", sans-serif;
  }
}


@media (min-width: 768px) and (max-width: 1024px) {
  .cz-single .cz-front-main {
    padding: 40px 26px 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cz-front .cz-front-main {
    padding: 40px 26px 30px;
  }
}


/* ── FEATURED THUMB — Option A duplicate of shared TB+PC rule ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-front-page .cz-featured-post .cz-featured-thumb img {
    max-height: none;
    object-fit: initial;
  }
}

/* ── TITLE STYLES — Option A duplicate of shared TB+PC rule ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-featured-title,
  .cz-latest-title {
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.25rem;
  }
  .cz-featured-title a,
  .cz-latest-title a {
    display: block;
    line-height: inherit;
  }
}

/* ── CARDS ── */

@media (min-width: 768px) and (max-width: 1024px) {
  .cz-single .cz-single-front-main {
    padding: 0 8px 24px 26px;
  /*       上 右  下   左 */
}


@media (min-width: 768px) and (max-width: 1024px) {
  /* Featured: stack vertically */
    /* Category/date: smaller on SP */
  .cz-front-page .cz-post-date--latest,
  .cz-front-page .cz-post-category--latest {
    font-size: 12px;
  }
  .cz-front-page .cz-featured-row {
    flex-direction: column;
  }
  .cz-front-page .cz-featured-post .cz-featured-thumb {
    width: 100%;
    max-width: none;
    margin: 0 0 10px 0;
  }
  .cz-front-page .cz-featured-post .cz-featured-body {
    width: 100%;
    margin: 0;
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Latest */
  .cz-front-page .cz-latest-thumb {
    height: 280px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .cz-front-page .cz-latest-card .cz-post-meta {
    margin: 10px 0 10px;
  }
  .cz-front-page .cz-latest-card .cz-latest-title {
    margin-top: 10px;
  }
  /* Title sizes: TB */
  .cz-featured-title a,
  .cz-latest-title a { font-size: 30px; }
  .cz-front-page .cz-featured-title .cz-title-en,
  .cz-front-page .cz-latest-title .cz-title-en { font-size: 24px; }
  }
}

/* ── LATEST GRID: 2-column — Option A duplicate of shared TB+PC rule ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  .cz-front-page .cz-latest-grid {
    column-gap: 32px;
  }
  .cz-front-page .cz-latest-thumb img {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* ── SINGLE PAGE ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-single .cz-post-title   { font-size: 30px; }
  .cz-single .cz-title-en     { font-size: 24px; }
  .cz-single .cz-post-body    { font-size: 19px; line-height: 1.8;  }
  .cz-single .cz-post-body h2 { font-size: 26px; line-height: 1.35; }
  .cz-single .cz-post-body h3 { font-size: 23px; line-height: 1.35; }
  .cz-single .cz-post-body h4 { font-size: 20px; line-height: 1.4;  }
}

/* ── NAV ITEM WIDTHS: TB (first 6 fixed at 14vw) ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-category-nav__item:nth-child(-n+6) {
    flex: 0 0 14vw;
  }
  .cz-category-nav__item:nth-child(-n+6) .cz-category-nav__link {
    width: 100%;
    justify-content: center;
  }
}

/* ── FOOTER ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .cz-site-footer {
    padding-top: 8.75vw;
  }
  .cz-copyright {
    font-size: 1.5vw;
  }
}

/* ══════════════════════════════════════════════════════════
   TABLET LANDSCAPE
   (min-width: 768px) and (max-width: 1023px) and (orientation: landscape)
   Placed at the BOTTOM of the Tablet Sanctuary.
══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  /* Single: activate 3-column grid */
  main.cz-single .cz-front-layout {
    grid-template-columns: 12% 86% 12%;
  }
  main.cz-single .cz-front-side--right {
    display: block;
    border-left: 1px solid #016d77;
  }

  /* --two-col variant: also 3-column in landscape */
  .cz-front-layout--two-col {
    grid-template-columns: 12% 86% 12%;
  }
  .cz-front-layout--two-col .cz-front-side--right {
    display: block;
    border-left: 1px solid #016d77;
  }
}


/*******************************************************************************
 *
 *  ██████╗  ██████╗
 *  ██╔══██╗██╔════╝
 *  ██████╔╝██║
 *  ██╔═══╝ ██║
 *  ██║     ╚██████╗
 *  ╚═╝      ╚═════╝
 *
 *  [PC SANCTUARY]
 *  1024px and above. No mobile or tablet code allowed here.
 *  Shared TB+PC blocks are duplicated here (Option A).
 *  Brake System: max-width: 1200px on .cz-front-main.
 *  2K supplement is at the BOTTOM of this section.
 *
 *******************************************************************************/

/* ── NAV VARIABLES ── */
@media (min-width: 1024px) {
  .cz-category-nav {
    --cz-nav-padding-top:    14px;
    --cz-nav-padding-bottom: 14px;
    --cz-nav-list-padding-t: 0;
    --cz-nav-list-padding-b: 0;
    --cz-nav-list-padding-r: 72px;
    --cz-nav-list-padding-l: 72px;
  }
}

/* ── HEADER ── */
@media (min-width: 1024px) {
  .cz-site-header__inner {
    padding: 10px 72px 0px 72px;
    gap: 6px;
  }
  .cz-site-header__top {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
  }
  .cz-site-branding {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .cz-site-branding .cz-site-title  { margin-left: 0; }
  .cz-site-branding .cz-site-tagline { margin-left: 0; }
}


@media (max-width: 767px) {
  .cz-single .cz-rail-line {
    display: block;
    width: 2px;
    height: 30px;
    background: #fff;
    margin: 0 auto 14px;
  }
}

@media (min-width: 1024px) {
  .nav a,
  .nav li:not(:last-child)::after {
    font-size: 28px; /* PC用 */
  }
}

/* ── LAYOUT: 10% / 80% / 10% + BRAKE SYSTEM ── */
@media (min-width: 1024px) {
  .cz-single .cz-single-front-main {
    padding: 10px 40px 40px;
  }
}

@media (min-width: 1024px) {
  /* Default 3-column */
  .cz-front-layout {
    grid-template-columns: 10% 80% 10%;
    gap: 0;
  }
  .cz-front-side--left {
    border-right: 1px solid #016d77;
  }
  .cz-front-side--right {
    display: block;
    border-left: 1px solid #016d77;
  }

  .cz-front-side--right::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #016d77;
  opacity: .65;
}

  /* Brake System: center column capped at 1200px */
  .cz-front-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 20px 10px;
  }
  /* Emerald line: higher opacity on PC */
  .cz-front-side--left::after {
    background: #04ffc0;
    opacity: .85;
  }
  /* 2-column variant */
  .cz-front-layout--two-col {
    grid-template-columns: 20% 80%;
  }
  .cz-front-layout--two-col .cz-front-side--right {
    display: none;
  }
  .cz-front-layout--two-col .cz-front-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px
  }
}

/* ── NAVIGATION ── */
@media (min-width: 1024px) {
  .cz-category-nav__link {
    border-color: #fff;
    color: #fff;
    background: transparent;
  }
  .cz-category-nav__link:hover,
  .cz-category-nav__link.is-active,
  .cz-category-nav__link[aria-current="page"] {
    border-color: #04ffc0;
    background: #04ffc0;
    color: #080808;
  }
  .cz-category-nav__item { flex: 0 0 auto; }
  .cz-category-nav__link { width: auto; }
}

/* ── FEATURED THUMB — Option A duplicate of shared TB+PC rule ── */
@media (min-width: 1024px) {
  .cz-single .cz-category-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.7vw 4vw 0.7vw 3vw;
  font-size: 1vw;
  font-weight: 700;
  color: #080808;
  background-color: #fff;

  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1vw), calc(100% - 1vw) 100%, 0 100%);
}
  .cz-front-page .cz-featured-post .cz-featured-thumb img {
    max-height: none;
    object-fit: initial;
  }
  .cz-featured-post .cz-featured-thumb {
    width: 100%;
    max-width: none;
  }
  .cz-featured-post .cz-featured-thumb img {
    max-height: 60vh;
  }

  .cz-front-side--right {
  border-left: 1px solid #016d77;
}

}

/* ── TITLE STYLES — Option A duplicate of shared TB+PC rule ── */
@media (min-width: 1024px) {
  .cz-featured-title,
  .cz-latest-title {
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.25rem;
  }
  .cz-featured-title a,
  .cz-latest-title a {
    display: block;
    line-height: inherit;
  }
}


/* PC SANCTUARY (1024px以上) */
@media (min-width: 1024px) {
  .cz-single .cz-rail-year {
    height: 100px;
    margin-bottom: 15px;
  }
  .cz-single .cz-rail-year__inner {
    font-size: 22px;
    font-weight: 900;
    font-family: "DotGothic16", sans-serif;
  }

  .cz-single .cz-rail-line {
    display: block;
    width: 3px;
    height: 60px;
    background: #fff;
    margin: 50px auto 30px;
  }

  .cz-single .cz-rail-category {
    font-size: 22px;
    font-weight: 900;
    font-family: "DotGothic16", sans-serif;
  }


}


/* ── CARDS ── */
@media (min-width: 1024px) {
  /* Featured: stack vertically */
  .cz-front-page .cz-featured-row {
    flex-direction: column;
  }
  .cz-front-page .cz-featured-post .cz-featured-thumb {
    width: 100%;
    max-width: none;
  }
  .cz-front-page .cz-featured-post .cz-featured-body {
    width: 100%;
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Thumbs: flush to grid edges */
  .cz-front-page .cz-featured-post .cz-featured-thumb,
  .cz-front-page .cz-latest-thumb {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  /* Latest: viewport-based height with floor */
  .cz-front-page .cz-latest-thumb {
    height: 40vh;
    min-height: 240px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .cz-front-page .cz-latest-thumb img {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .cz-front-page .cz-latest-card .cz-post-meta {
    margin: 10px 0 10px;
  }
  .cz-front-page .cz-latest-card .cz-latest-title {
    margin-top: 10px;
  }
  /* Title sizes: PC */
  .cz-featured-title a,
  .cz-latest-title a { font-size: 36px; }
  .cz-front-page .cz-featured-title .cz-title-en,
  .cz-front-page .cz-latest-title .cz-title-en { font-size: 28px; }
}

/* ── LATEST GRID: 2-column — Option A duplicate of shared TB+PC rule ── */
@media (min-width: 1024px) {
  .cz-latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  .cz-front-page .cz-latest-grid {
    column-gap: 32px;
  }
  .cz-front-page .cz-latest-thumb img {
    max-height: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/* ── SINGLE PAGE ── */
@media (min-width: 1024px) {
  .cz-single .cz-post-title { font-size: 36px; }
  .cz-single .cz-title-en   { font-size: 28px; }
  .cz-single .cz-hero-image img {
    max-height: none;
    object-fit: initial;
  }
  .cz-single .cz-post-body    { font-size: 20px; line-height: 1.9;  }
  .cz-single .cz-post-body h2 { font-size: 30px; line-height: 1.35; }
  .cz-single .cz-post-body h3 { font-size: 26px; line-height: 1.35; }
  .cz-single .cz-post-body h4 { font-size: 22px; line-height: 1.4;  }
}

/* ── FOOTER ── */
@media (min-width: 1024px) {
  .cz-site-footer {
    padding-top: 6.25vw;
    padding-bottom: 0.3vw;
  }
  .cz-copyright {
    font-size: 0.8vw;
  }
}

/* ══════════════════════════════════════════════════════════
   2K SUPPLEMENT
   min-width: 2560px
   Placed at the BOTTOM of the PC Sanctuary.
══════════════════════════════════════════════════════════ */
@media (min-width: 2560px) {
  .cz-front-layout--two-col {
    grid-template-columns: 20% 80%;
  }
  .cz-front-layout--two-col .cz-front-side--right {
    display: none;
  }
  .cz-front-layout--two-col .cz-front-main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}











/* 1. 外枠（上・左右の隙間を10pxに縮めてキュッとさせました） */
.scifi-frame {
    box-sizing: border-box;
    background: rgba(0, 15, 25, 0.8) !important;
    border: 1px solid #04FFC0 !important;
    padding: 10px 10px 20px 10px !important; 
    margin-bottom: 26px !important;
    position: relative;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}

/* 左上の小さなL字ブラケット装飾 */
.scifi-frame::before {
    content: "";
    position: absolute;
    top: 6px; left: 6px;
    width: 12px; height: 12px;
    border-top: 1px solid #04FFC0;
    border-left: 1px solid #04FFC0;
    opacity: 0.8;
    z-index: 10;
    pointer-events: none;
}

/* 2. 背景ブロック（可変してもエラーで消えない安全な形） */
.scifi-full-header {
    box-sizing: border-box;
    position: relative;
    background: #04FFC0;
    color: #000;
    display: block;
    height: 48px;   
    margin: 0; 
    z-index: 10;
    width: 100%; 
    
    /* ★ここを変更！ 右上と右下の両方に斜めの切れ込み（10px）を入れました */
    clip-path: polygon(
        0 0, 
        calc(100% - 7px) 0,     /* ★追加：上辺の右から7px内側 */
        100% 7px,               /* ★追加：右辺の上から7px下 */
        100% calc(100% - 10px),  /* 右辺の下から10px上 */
        calc(100% - 10px) 100%,  /* 底辺の右から10px内側 */
        calc(100% - 160px) 100%, 
        calc(100% - 190px) 12px, 
        0 12px
    );
}

/* 左側の細いスラッシュ装飾 */
.scifi-full-header::after {
    content: "";
    position: absolute;
    top: 0; left: 0; 
    width: calc(100% - 190px); 
    height: 12px; 
    background: repeating-linear-gradient(45deg, #000, #000 1px, transparent 1px, transparent 6px);
    opacity: 0.4;
}

/* 3. 文字の位置（右端ギリギリの 15px に寄せて無駄な隙間を排除） */
.scifi-header-text {
    position: absolute;
    top: 6px;     
    right: 15px; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.scifi-row-cat {
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    white-space: nowrap; 
}

.scifi-val { white-space: nowrap; }
.scifi-lbl { font-size: 9px; opacity: 0.7; margin-right: 5px; }

.scifi-row-date {
    font-size: 11px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    margin-right: 0; 
    white-space: nowrap;
}

/* 4. コンテンツエリア */
.scifi-content-body { padding: 0; }
.cz-featured-title a { color: #fff !important; text-decoration: none; }
.cz-featured-excerpt { color: #ccc !important; font-size: 14px; line-height: 1.5; }









/* =========================================
   5. サムネイルの縦長・切り抜き固定（絶対伸びない魔法）
   ========================================= */

/* 写真を囲んでいる大元のエリアごと引き上げる */
.scifi-content-body { 
    position: relative;
    z-index: 1;          /* ★ヘッダーより「後ろ」に設定 */
    margin-top: -36px;   /* ★ここで全体をガツンと上に引き上げる！ */
    padding: 0; 
}

/* サムネイルの枠（さっき追加した margin-top や z-index は消してシンプルに戻す） */
.cz-featured-thumb {
    display: block;
    width: 100%;
    margin-bottom: 5px; 
}


/* 6. 装飾ギミックたち */
.scifi-frame-bottom-slashes {
    position: absolute;
    bottom: -1px; left: 40px;
    width: 120px; height: 6px;
    background: repeating-linear-gradient(-45deg, #04FFC0, #04FFC0 2px, transparent 2px, transparent 5px);
    clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}

/* ★直角三角形（右下にピタッとフィット） */
.scifi-deco-triangle {
    position: absolute;
    bottom: 10px; right: 10px; 
    width: 0; height: 0;
    border-bottom: 10px solid #04FFC0;
    border-left: 10px solid transparent;
    opacity: 0.8;
}