/*
Theme Name: v2-kandora-clean
Description: kandora-clean を複製して整理用に作成したテーマ
Version: 1.0.0
Text Domain: v2-kandora-clean
*/

/* =========================================
   レイアウト整理版
   ・横幅最終調整を基準に統合
   ・カレンダー補正は Classic / Block 両対応
   ・機能は変えず、重複していた見た目指定だけ整理
========================================= */

.site-container,
.site-container--page,
.site-container--single,
.archive-layout,
.kst-archive-layout {
  width: 100%;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.site-container {
  padding-left: 16px;
  padding-right: 16px;
}

.site-container--page,
.site-container--single {
  max-width: 1140px;
  padding: 10px 16px 32px;
}

.content-layout--page,
.content-layout--single {
  gap: 22px;
}

.site-main-wrap {
  gap: 32px;
  padding-top: 20px;
  padding-bottom: 34px;
}

.site-sidebar {
  width: auto;
  flex: 0 1 29%;
  min-width: 270px;
  max-width: none;
}

.kst-header__inner {
  max-width: 1140px;
  padding-left: 16px;
  padding-right: 16px;
}

.site-sidebar .widget_calendar,
.site-sidebar .calendar_wrap,
.site-sidebar .wp-block-calendar {
  overflow: hidden;
}

.site-sidebar .widget_calendar .calendar_wrap,
.site-sidebar .wp-block-calendar {
  overflow-x: auto;
}

.site-sidebar #wp-calendar,
.site-sidebar .wp-block-calendar table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  background: #ffffff;
}

.site-sidebar #wp-calendar caption,
.site-sidebar .wp-block-calendar caption {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  color: #51474c;
}

.site-sidebar #wp-calendar th,
.site-sidebar #wp-calendar td,
.site-sidebar .wp-block-calendar th,
.site-sidebar .wp-block-calendar td {
  width: 14.285%;
  padding: 8px 4px;
  border: 1px solid #f0ecee;
  text-align: center;
  vertical-align: middle;
  font-size: 13px;
  line-height: 1.4;
  box-sizing: border-box;
}

.site-sidebar #wp-calendar thead th,
.site-sidebar .wp-block-calendar thead th {
  background: #faf7f8;
  color: #6d6468;
  font-weight: 700;
}

.site-sidebar #wp-calendar tbody td,
.site-sidebar .wp-block-calendar tbody td {
  background: #ffffff;
}

.site-sidebar #wp-calendar tbody a,
.site-sidebar .wp-block-calendar tbody a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
  border-radius: 999px;
  background: #fff3f8;
  color: #c85b84;
  font-weight: 700;
  text-decoration: none;
}

.site-sidebar #wp-calendar tbody a:hover,
.site-sidebar .wp-block-calendar tbody a:hover {
  background: #f7dce7;
  color: #a84269;
}

.site-sidebar #wp-calendar #today {
  background: #fff8fb;
}

.site-sidebar #wp-calendar #today a {
  background: #e9a9c1;
  color: #ffffff;
}

.site-sidebar #wp-calendar tfoot td {
  border: 0;
  padding: 10px 2px 0;
  background: transparent;
  font-size: 13px;
}

.site-sidebar #wp-calendar #prev {
  text-align: left;
}

.site-sidebar #wp-calendar #next {
  text-align: right;
}

.site-sidebar .wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
}

.site-sidebar .wp-calendar-nav a {
  color: #c85b84;
  text-decoration: none;
}

.site-sidebar .wp-calendar-nav a:hover {
  color: #a84269;
}

.site-sidebar .widget_calendar {
  margin-bottom: 18px;
}

@media (min-width: 861px) {
  .content-layout,
  .content-layout--page,
  .content-layout--single,
  .archive-layout,
  .kst-archive-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 29%) !important;
    gap: 22px;  /* ★ メインとサイドバーの間隔 ← 値を変える（16px/22px/28px/32px） */
    align-items: start;
  }

  .content-layout > :first-child,
  .content-layout--page > :first-child,
  .content-layout--single > :first-child,
  .archive-layout > :first-child,
  .kst-archive-layout > :first-child,
  .site-main,
  .site-main--page,
  .site-main--single,
  .content-main,
  .kst-archive-main,
  main {
    min-width: 0;
  }

  .content-layout > :last-child,
  .content-layout--page > :last-child,
  .content-layout--single > :last-child,
  .archive-layout > :last-child,
  .kst-archive-layout > :last-child,
  .content-layout aside,
  .content-layout--page aside,
  .content-layout--single aside,
  .archive-layout aside,
  .kst-archive-layout aside,
  .content-layout .sidebar,
  .content-layout--page .sidebar,
  .content-layout--single .sidebar,
  .archive-layout .sidebar,
  .kst-archive-layout .sidebar,
  .content-layout .widget-area,
  .content-layout--page .widget-area,
  .content-layout--single .widget-area,
  .archive-layout .widget-area,
  .kst-archive-layout .widget-area,
  .content-layout .site-sidebar,
  .content-layout--page .site-sidebar,
  .content-layout--single .site-sidebar,
  .archive-layout .site-sidebar,
  .kst-archive-layout .site-sidebar {
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
  }

  .site-main-wrap {
    display: flex !important;
    align-items: flex-start;
    gap: 32px;
  }

  .site-main-wrap > :first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .site-main-wrap > .site-sidebar,
  .site-main-wrap > aside,
  .site-main-wrap > .sidebar,
  .site-main-wrap > .widget-area {
    width: auto;
    flex: 0 1 29%;
    min-width: 270px;
    max-width: none;
    margin-top: 0;
  }
}

@media (max-width: 1100px) {
  .site-main-wrap {
    gap: 18px;
  }

  .site-sidebar {
    flex: 0 1 30%;
    min-width: 240px;
  }
}

@media (max-width: 860px) {

  /* ① レイアウトをブロック表示に切替 */
  .content-layout,
  .content-layout--page,
  .content-layout--single,
  .archive-layout,
  .kst-archive-layout,
  .site-main-wrap {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* ② サイドバーを縦並びにリセット（:is()でセレクタを大幅に圧縮） */
  :is(.content-layout, .content-layout--page, .content-layout--single,
      .archive-layout, .kst-archive-layout) > :last-child,
  :is(.content-layout, .content-layout--page, .content-layout--single,
      .archive-layout, .kst-archive-layout) :is(aside, .sidebar, .widget-area, .site-sidebar),
  .site-main-wrap > :is(.site-sidebar, aside, .sidebar, .widget-area) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    margin-top: 24px;
  }

  /* ③ コンテナの左右余白 */
  :is(.site-container, .site-container--page, .site-container--single,
      .archive-layout, .kst-archive-layout) {
    padding-left: 0;   /* ★ スマホ用 サイト左余白 ← ここを変える（0px=なし / 4px / 8px / 12px / 16px） */
    padding-right: 0;  /* ★ スマホ用 サイト右余白 ← 左と同じ値にする */
  }

  /* ④ ヘッダー内側余白 */
  .kst-header__inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* ⑤ メインコンテンツの上下余白 */
  .site-main-wrap {
    padding-top: 16px;
    padding-bottom: 28px;
  }
}

/* =========================================
   新header.php 用ヘッダーCSS
   ・PC: 右ハンバーガー / 右から開く
   ・スマホ: 左ハンバーガー / 左から開く
   ※ 追加CSSのいちばん下に追加
========================================= */

/* ヘッダー本体 */
.kst-header {
  position: relative;
  z-index: 100;
  background: #111111;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  /* ★ ヘッダーの横幅をコンテンツと同じmax-widthに制限 */
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.kst-header__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  box-sizing: border-box;
}

.kst-header__brand {
  min-width: 0;
  order: 1;
  justify-self: start;
}

.kst-header__logo,
.kst-header__logo .custom-logo-link {
  display: flex;
  align-items: center;
}

.kst-header__logo img,
.kst-header__logo .custom-logo {
  display: block;
  width: auto;
  max-height: 46px;
  height: auto;
  margin: 0;
}

/* PC通常メニュー */
.kst-header__nav {
  min-width: 0;
  order: 2;
  justify-self: end;
}

.kst-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kst-header__nav .kst-main-menu,
.kst-header__nav .menu > ul,
.kst-header__nav > div > ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kst-header__nav .kst-main-menu > li,
.kst-header__nav .menu > ul > li,
.kst-header__nav > div > ul > li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kst-header__nav .kst-main-menu > li > a,
.kst-header__nav .menu > ul > li > a,
.kst-header__nav > div > ul > li > a {
  display: block;
  padding: 10px 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap;
}

.kst-header__nav .kst-main-menu > li > a:hover,
.kst-header__nav .menu > ul > li > a:hover,
.kst-header__nav > div > ul > li > a:hover,
.kst-header__nav .current-menu-item > a,
.kst-header__nav .current_page_item > a,
.kst-header__nav .current-menu-ancestor > a {
  color: #ffb6cc;
}

.kst-header__nav .sub-menu,
.kst-header__nav .children {
  display: none !important;
}

/* ハンバーガー */
.kst-header__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  order: 3;
}

.kst-header__hamburger {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.kst-header__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #ffffff;
  border-radius: 10px;
}

/* 背景オーバーレイ */
.kst-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.45);
}

/* ドロワー本体 */
.kst-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(380px, 90vw);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  pointer-events: none;
}

.kst-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.kst-drawer__panel {
  height: 100%;
  background: #ffffff;
  color: #222222;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.kst-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #e5e5e5;
}

.kst-drawer__title {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: #111111;
}

.kst-drawer__close {
  width: 40px;
  height: 40px;
  border: 1px solid #dddddd;
  background: #ffffff;
  border-radius: 10px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.kst-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0 24px;
}

.kst-drawer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kst-drawer-menu > li,
.kst-drawer__nav .menu > li,
.kst-drawer__nav > div > ul > li {
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
  list-style: none;
}

.kst-drawer-menu a,
.kst-drawer__nav .menu a,
.kst-drawer__nav > div > ul a {
  display: block;
  padding: 14px 18px;
  color: #222222;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}

.kst-drawer-menu a:hover,
.kst-drawer__nav .menu a:hover,
.kst-drawer__nav > div > ul a:hover {
  background: #faf7f8;
  color: #d6578a;
}

.kst-drawer-menu .sub-menu a,
.kst-drawer__nav .menu .sub-menu a,
.kst-drawer__nav > div > ul .sub-menu a {
  padding-left: 32px;
  font-weight: 500;
  font-size: 14px;
}

/* 開いている時 */
body.kst-drawer-open {
  overflow: hidden;
}

/* 管理バー対策 */
.admin-bar .kst-drawer,
.admin-bar .kst-drawer-overlay {
  top: 32px;
  height: calc(100vh - 32px);
}

@media (max-width: 782px) {
  .admin-bar .kst-drawer,
  .admin-bar .kst-drawer-overlay {
    top: 46px;
    height: calc(100vh - 46px);
  }
}

/* スマホ */
/* ★ スマホ用ヘッダー: ハンバーガーは左端、ロゴは中央に配置
   仕組み:
   - .kst-header__inner を position:relative にする
   - .kst-header__brand を position:absolute で左右 50%に置く
   - .kst-header__tools（ハンバーガー）は通常フローで左端に置く
   ロゴの上下位置を変えたい場合: top の値を変える（例: 45%/50%/55%）
*/
@media (max-width: 960px) {
  .kst-header__inner {
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding-left: 12px; /* ★ ヘッダー左余白（ハンバーガーの左位置） ← 値を変える（例: 8px/12px/16px） */
    padding-right: 12px;
    position: relative; /* ロゴの絶対中央配置の基準点 */
  }

  .kst-header__tools {
    order: 1;
    justify-self: start;
    position: relative;
    z-index: 2; /* ハンバーガーをロゴの上に表示 */
  }

  .kst-header__brand {
    /* ★ ロゴをヘッダー内で絶対配置
       左右位置: left の値で調整
         50% → 完全中央
         52% → わずかに右
         53% → 少し右（現在）
         54% → やや右
         56% → かなり右
         58% → 大きく右
    */
    position: absolute;
    left: 53%; /* ★ ロゴの左右位置 ← ここを変える（50%=中央 / 大きくすると右に移動） */
    top: 50%;  /* ★ ロゴの上下位置 ← ここを変える（50%=上下中央 / 45%=少し上 / 55%=少し下） */
    transform: translate(-50%, -50%);
    text-align: center;
    min-width: 0;
    z-index: 1;
  }

  .kst-header__nav {
    display: none !important;
  }

  .kst-header__logo img,
  .kst-header__logo .custom-logo {
    max-height: 42px;
  }

  .kst-drawer {
    left: 0;
    right: auto;
    transform: translateX(-100%);
  }

  .kst-drawer.is-open {
    transform: translateX(0);
  }

  .kst-drawer__panel {
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.18);
  }
}

/* =========================================
   Phase 1: CFT / image-3 / YouTube
   元: 1本目：CFT側 完成版 [コピー]
   + 記事ページを装飾するため
========================================= */

/* ------------------------------
   CFT 全体の土台
------------------------------ */
.drama-cft-wrap{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  clear:both !important;
  margin:0 0 28px 0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.8 !important;
  float:none !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
  overflow:visible !important;
}

.drama-cft-wrap,
.drama-cft-wrap *{
  box-sizing:border-box !important;
}

.drama-cft-wrap::before,
.drama-cft-wrap::after,
.drama-cft-block::before,
.drama-cft-block::after{
  content:"";
  display:table;
}

.drama-cft-wrap::after,
.drama-cft-block::after{
  clear:both;
}

.drama-cft-wrap > *,
.drama-cft-wrap .drama-cft-block > *,
.drama-cft-wrap .drama-cft-image > *,
.drama-cft-wrap .drama-cft-youtube > *,
.drama-cft-wrap .drama-cft-progress > *{
  max-width:none !important;
}

.drama-cft-wrap *{
  float:none !important;
}

.drama-cft-wrap p,
.drama-cft-wrap figure,
.drama-cft-wrap div,
.drama-cft-wrap h1,
.drama-cft-wrap h2,
.drama-cft-wrap h3,
.drama-cft-wrap h4,
.drama-cft-wrap h5,
.drama-cft-wrap h6,
.drama-cft-wrap ul,
.drama-cft-wrap ol,
.drama-cft-wrap li,
.drama-cft-wrap dl,
.drama-cft-wrap dt,
.drama-cft-wrap dd,
.drama-cft-wrap table,
.drama-cft-wrap blockquote,
.drama-cft-wrap pre{
  max-width:none !important;
}

.drama-cft-wrap .drama-cft-block,
.drama-cft-wrap .drama-cft-meta-wrap,
.drama-cft-wrap .drama-cft-meta,
.drama-cft-wrap .drama-cft-meta-link,
.drama-cft-wrap .drama-cft-meta-text,
.drama-cft-wrap .drama-cft-star,
.drama-cft-wrap .drama-cft-image,
.drama-cft-wrap .drama-cft-youtube,
.drama-cft-wrap .drama-cft-youtube-title,
.drama-cft-wrap .drama-cft-youtube-embed,
.drama-cft-wrap .drama-cft-progress{
  display:block !important;
}

.drama-cft-block{
  width:100% !important;
  margin:0 0 24px 0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.8 !important;
  clear:both !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
  overflow:visible !important;
}

.drama-cft-block:last-child{
  margin-bottom:0 !important;
}

.drama-cft-block > :first-child{
  margin-top:0 !important;
}

.drama-cft-block > :last-child{
  margin-bottom:0 !important;
}

/* ------------------------------
   CFT テキスト系
------------------------------ */
.drama-cft-meta-wrap{
  margin-bottom:24px !important;
}

.drama-cft-meta,
.drama-cft-meta-link,
.drama-cft-meta-text{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

.drama-cft-meta-line{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  border:0 !important;
}

.drama-cft-star{
  white-space:normal !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
}

/* ------------------------------
   image-3 基本
------------------------------ */
.drama-cft-image,
.drama-cft-image *{
  text-align:center !important;
}

.drama-cft-image img,
.drama-cft-image iframe,
.drama-cft-image video,
.drama-cft-image embed,
.drama-cft-image object,
.drama-cft-image canvas,
.drama-cft-image svg{
  max-width:100% !important;
  height:auto !important;
  display:block !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  vertical-align:top !important;
}

.drama-cft-image figure,
.drama-cft-image .wp-block-image,
.drama-cft-image .wp-caption,
.drama-cft-image .alignnone,
.drama-cft-image .aligncenter,
.drama-cft-image .alignleft,
.drama-cft-image .alignright{
  display:block !important;
  float:none !important;
  clear:both !important;
  margin:0 auto !important;
  padding:0 !important;
  max-width:100% !important;
  width:auto !important;
}

.drama-cft-image p,
.drama-cft-image div,
.drama-cft-image figure,
.drama-cft-image section,
.drama-cft-image article{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.drama-cft-image p:empty,
.drama-cft-image div:empty{
  display:none !important;
}

/* ------------------------------
   YouTube 基本
------------------------------ */
.drama-cft-youtube{
  margin:0 0 24px 0 !important;
  padding:0 !important;
  text-align:center !important;
  gap:0 !important;
  row-gap:0 !important;
  column-gap:0 !important;
}

.drama-cft-youtube-title{
  width:100% !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.6 !important;
  font-weight:700 !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

.drama-cft-youtube-embed{
  position:relative !important;
  width:100% !important;
  max-width:800px !important;
  aspect-ratio:16 / 9 !important;
  margin:0 auto !important;
  padding:0 !important;
  overflow:hidden !important;
  line-height:0 !important;
  font-size:0 !important;
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
  clear:both !important;
}

.drama-cft-youtube-button{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#000 !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

.drama-cft-youtube-thumb{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:#111 !important;
}

.drama-cft-youtube-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:72px !important;
  height:50px !important;
  margin:-25px 0 0 -36px !important;
  border-radius:14px !important;
  background:rgba(255, 0, 0, 0.92) !important;
  box-shadow:0 4px 18px rgba(0,0,0,.35) !important;
}

.drama-cft-youtube-play::before{
  content:"" !important;
  position:absolute !important;
  left:29px !important;
  top:15px !important;
  border-style:solid !important;
  border-width:10px 0 10px 18px !important;
  border-color:transparent transparent transparent #fff !important;
}

.drama-cft-youtube-embed iframe{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  vertical-align:top !important;
  background:transparent !important;
}

/* ------------------------------
   CFT内の進捗
------------------------------ */
.drama-cft-progress .drama-simplem-grid,
.drama-cft-progress .drama-mcprog-wrap{
  margin:0 !important;
}

/* ------------------------------
   テーマ干渉対策
------------------------------ */
.drama-cft-wrap p,
.drama-cft-wrap figure,
.drama-cft-wrap .wp-block-embed,
.drama-cft-wrap .wp-block-video,
.drama-cft-wrap .wp-block-image,
.drama-cft-wrap .wp-caption,
.drama-cft-wrap .embed-block,
.drama-cft-wrap .video-container,
.drama-cft-wrap .fluid-width-video-wrapper,
.drama-cft-wrap .alignnone,
.drama-cft-wrap .aligncenter,
.drama-cft-wrap .alignleft,
.drama-cft-wrap .alignright{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.drama-cft-wrap .alignleft,
.drama-cft-wrap .alignright{
  float:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.drama-cft-wrap .fluid-width-video-wrapper{
  position:static !important;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
}

/* ------------------------------
   記事ページの装飾上書き
   ★ 画像・YouTube の装飾（枠・影・角丸）はシンプルにしています。
   ★ 装飾を復活させたい場合は「/* 装飾なし */」のコメント行を削除し、
      その下のプロパティを有効にしてください。
------------------------------ */
.single-entry .entry-content .drama-cft-image,
.single-entry .entry-content .drama-cft-youtube{
  width:100% !important;
  margin:0 auto 30px !important;
  box-sizing:border-box !important;
}

/* 装飾なし：画像エリアの枠・背景・影・角丸をすべて除去 */
.single-entry .entry-content .drama-cft-image{
  max-width:760px !important;
  padding:0 !important;           /* ← 装飾あり: 14px */
  background:transparent !important; /* ← 装飾あり: #ffffff */
  border:none !important;         /* ← 装飾あり: 1px solid #eee3e8 */
  border-radius:0 !important;     /* ← 装飾あり: 18px */
  box-shadow:none !important;     /* ← 装飾あり: 0 10px 26px rgba(0,0,0,0.05) */
}

.single-entry .entry-content .drama-cft-image img,
.single-entry .entry-content .drama-cft-image iframe,
.single-entry .entry-content .drama-cft-image video,
.single-entry .entry-content .drama-cft-image embed,
.single-entry .entry-content .drama-cft-image object,
.single-entry .entry-content .drama-cft-image canvas,
.single-entry .entry-content .drama-cft-image svg{
  display:block !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
  border-radius:0 !important;     /* ← 装飾あり: 14px */
  overflow:hidden !important;
}

.single-entry .entry-content .drama-cft-image a{
  display:block !important;
}

.single-entry .entry-content .drama-cft-image figure,
.single-entry .entry-content .drama-cft-image .wp-block-image,
.single-entry .entry-content .drama-cft-image .wp-caption{
  margin:0 auto !important;
}

.single-entry .entry-content .drama-cft-image figcaption,
.single-entry .entry-content .drama-cft-image .wp-caption-text{
  margin:10px 0 0 !important;
  padding:0 4px !important;
  font-size:13px !important;
  line-height:1.7 !important;
  color:#7a6f75 !important;
  text-align:center !important;
}

/* 装飾なし：YouTubeエリアの枠・背景・影・角丸をすべて除去 */
.single-entry .entry-content .drama-cft-youtube{
  max-width:860px !important;
  padding:0 !important;           /* ← 装飾あり: 12px */
  background:transparent !important; /* ← 装飾あり: #ffffff */
  border:none !important;         /* ← 装飾あり: 1px solid #eee3e8 */
  border-radius:0 !important;     /* ← 装飾あり: 18px */
  box-shadow:none !important;     /* ← 装飾あり: 0 10px 26px rgba(0,0,0,0.05) */
}

/* YouTubeタイトルラベルも装飾なしにシンプル化 */
.single-entry .entry-content .drama-cft-youtube-title{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 0 12px 0 !important;
  padding:0 !important;           /* ← 装飾あり: 6px 12px */
  background:transparent !important; /* ← 装飾あり: #fff4f7 */
  border:none !important;         /* ← 装飾あり: 1px solid #f2dbe4 */
  border-radius:0 !important;     /* ← 装飾あり: 999px */
  color:#555 !important;          /* ← 装飾あり: #9b556d */
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.4 !important;
  letter-spacing:0.03em !important;
}

.single-entry .entry-content .drama-cft-youtube-title::before{
  content:"" !important;
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:#e06a86 !important;
  flex:0 0 8px !important;
}

/* YouTube埋め込みエリアの角丸・影を除去 */
.single-entry .entry-content .drama-cft-youtube-embed{
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  margin:0 auto !important;
  border-radius:0 !important;     /* ← 装飾あり: 16px */
  overflow:hidden !important;
  background:#111111 !important;
  box-shadow:none !important;     /* ← 装飾あり: 0 10px 24px rgba(0,0,0,0.14) */
}

.single-entry .entry-content .drama-cft-youtube-button{
  position:absolute !important;
  inset:0 !important;
  border-radius:0 !important;     /* ← 装飾あり: 16px */
  overflow:hidden !important;
  background:#111111 !important;
}

.single-entry .entry-content .drama-cft-youtube-button::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.22) 100%
  ) !important;
  pointer-events:none !important;
  transition:opacity 0.22s ease !important;
}

.single-entry .entry-content .drama-cft-youtube-thumb{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  transition:transform 0.45s ease !important;
}

.single-entry .entry-content .drama-cft-youtube-button:hover .drama-cft-youtube-thumb{
  transform:scale(1.04) !important;
}

.single-entry .entry-content .drama-cft-youtube-button:hover::after{
  opacity:0.72 !important;
}

.single-entry .entry-content .drama-cft-youtube-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:84px !important;
  height:58px !important;
  margin:0 !important;
  transform:translate(-50%, -50%) !important;
  border-radius:18px !important;
  background:rgba(226, 70, 92, 0.94) !important;
  box-shadow:0 10px 26px rgba(0,0,0,.30) !important;
  transition:transform 0.22s ease, background-color 0.22s ease !important;
}

.single-entry .entry-content .drama-cft-youtube-play::before{
  content:"" !important;
  position:absolute !important;
  left:34px !important;
  top:17px !important;
  border-style:solid !important;
  border-width:12px 0 12px 20px !important;
  border-color:transparent transparent transparent #ffffff !important;
}

.single-entry .entry-content .drama-cft-youtube-button:hover .drama-cft-youtube-play{
  transform:translate(-50%, -50%) scale(1.06) !important;
  background:rgba(214, 54, 77, 0.98) !important;
}

.single-entry .entry-content .drama-cft-youtube-button:focus-visible{
  outline:3px solid #f0a9bf !important;
  outline-offset:4px !important;
}

.single-entry .entry-content .drama-cft-youtube-embed iframe{
  border-radius:0 !important;     /* ← 装飾あり: 16px */
}

@media (max-width: 767px){
  /* スマホでも装飾なし */
  .single-entry .entry-content .drama-cft-image{
    padding:0 !important;         /* ← 装飾あり: 10px */
    border-radius:0 !important;   /* ← 装飾あり: 14px */
  }

  .single-entry .entry-content .drama-cft-image img,
  .single-entry .entry-content .drama-cft-image iframe,
  .single-entry .entry-content .drama-cft-image video,
  .single-entry .entry-content .drama-cft-image embed,
  .single-entry .entry-content .drama-cft-image object,
  .single-entry .entry-content .drama-cft-image canvas,
  .single-entry .entry-content .drama-cft-image svg{
    border-radius:0 !important;   /* ← 装飾あり: 10px */
  }

  .single-entry .entry-content .drama-cft-youtube{
    padding:0 !important;         /* ← 装飾あり: 10px */
    border-radius:0 !important;   /* ← 装飾あり: 14px */
  }

  .single-entry .entry-content .drama-cft-youtube-embed,
  .single-entry .entry-content .drama-cft-youtube-button,
  .single-entry .entry-content .drama-cft-youtube-embed iframe{
    border-radius:0 !important;   /* ← 装飾あり: 12px */
  }

  .single-entry .entry-content .drama-cft-youtube-title{
    font-size:12px !important;
    padding:5px 10px !important;
    margin-bottom:10px !important;
  }

  .single-entry .entry-content .drama-cft-youtube-play{
    width:70px !important;
    height:48px !important;
    border-radius:15px !important;
  }

  .single-entry .entry-content .drama-cft-youtube-play::before{
    left:29px !important;
    top:14px !important;
    border-width:10px 0 10px 17px !important;
  }
}

/* =========================================
   簡易版進捗
   2本目：簡易版 完成版 から移すCSS
========================================= */
.drama-simplem-wrap{margin:24px 0 0}
.drama-simplem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.drama-simplem-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  font-size:14px;
  line-height:1.7;
  border-top-width:4px;
}
.drama-simplem-card-top{
  display:flex;
  justify-content:flex-start;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.drama-simplem-card-top.is-no-name{
  justify-content:center;
}
.drama-simplem-card-name{
  font-size:17px;
  font-weight:800;
  color:#111827;
  line-height:1.4;
}
.drama-simplem-card-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}
.drama-simplem-card.is-before{
  background:#fff;
  border-color:#dbe2ea;
  border-top-color:#2563eb;
}
.drama-simplem-card.is-before .drama-simplem-card-badge{
  background:#dbeafe;
  color:#1d4ed8;
}
.drama-simplem-card.is-before .drama-simplem-current{
  color:#1d4ed8;
}
.drama-simplem-card.is-onair{
  background:#fff;
  border-color:#dbe2ea;
  border-top-color:#eab308;
}
.drama-simplem-card.is-onair .drama-simplem-card-badge{
  background:#fef3c7;
  color:#a16207;
}
.drama-simplem-card.is-onair .drama-simplem-current{
  color:#a16207;
}
.drama-simplem-card.is-ended{
  background:#fff;
  border-color:#dbe2ea;
  border-top-color:#dc2626;
}
.drama-simplem-card.is-ended .drama-simplem-card-badge{
  background:#fee2e2;
  color:#dc2626;
}
.drama-simplem-card.is-ended .drama-simplem-current{
  color:#b91c1c;
}
.drama-simplem-current{
  font-weight:700;
  margin-bottom:12px;
  text-align:center;
}
.drama-simplem-meta{
  display:block;
  color:#374151;
  text-align:center;
}
.drama-simplem-meta-row{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  margin:8px 0;
  line-height:1.7;
  text-align:center;
  flex-wrap:wrap;
}
.drama-simplem-meta-label{
  display:inline;
  font-weight:700;
  color:#111827;
}
.drama-simplem-meta-value{
  display:inline;
}
@media (max-width:767px){
  .drama-simplem-grid{grid-template-columns:1fr}
}

/* =========================================
   複雑版進捗
   3本目：複雑版 完成版 から移すCSS
========================================= */
.drama-mcprog-wrap{margin:24px 0 0}
.drama-mcprog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.drama-mcprog-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  font-size:14px;
  line-height:1.7;
  border-top-width:4px;
}
.drama-mcprog-card-top{
  display:flex;
  justify-content:center;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  flex-wrap:wrap;
  text-align:center;
}
.drama-mcprog-card-name{
  font-size:17px;
  font-weight:800;
  color:#111827;
  line-height:1.4;
  text-align:center;
}
.drama-mcprog-card-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}

.drama-mcprog-card.is-before{
  background:#fff;
  border-color:#dbe2ea;
  border-top-color:#2563eb;
}
.drama-mcprog-card.is-before .drama-mcprog-card-badge{
  background:#dbeafe;
  color:#1d4ed8;
}
.drama-mcprog-card.is-before .drama-mcprog-current{
  color:#1d4ed8;
}
.drama-mcprog-card.is-before .drama-mcprog-bar-inner{
  background:linear-gradient(90deg,#60a5fa,#2563eb);
}

.drama-mcprog-card.is-onair{
  background:#fff;
  border-color:#dbe2ea;
  border-top-color:#eab308;
}
.drama-mcprog-card.is-onair .drama-mcprog-card-badge{
  background:#fef3c7;
  color:#a16207;
}
.drama-mcprog-card.is-onair .drama-mcprog-current{
  color:#a16207;
}
.drama-mcprog-card.is-onair .drama-mcprog-bar-inner{
  background:linear-gradient(90deg,#facc15,#eab308);
}

.drama-mcprog-card.is-ended{
  background:#fff;
  border-color:#dbe2ea;
  border-top-color:#dc2626;
}
.drama-mcprog-card.is-ended .drama-mcprog-card-badge{
  background:#fee2e2;
  color:#dc2626;
}
.drama-mcprog-card.is-ended .drama-mcprog-current{
  color:#b91c1c;
}
.drama-mcprog-card.is-ended .drama-mcprog-bar-inner{
  background:linear-gradient(90deg,#f87171,#dc2626);
}

.drama-mcprog-current{
  font-weight:700;
  margin-bottom:10px;
  text-align:center;
}

.drama-mcprog-meta{
  display:grid;
  gap:8px;
  margin-bottom:14px;
  color:#4b5563;
}

.drama-mcprog-meta-row{
  display:grid;
  grid-template-columns:max-content max-content max-content max-content;
  justify-content:center;
  column-gap:6px;
  align-items:baseline;
  text-align:center;
}

.drama-mcprog-meta-row.is-simple{
  grid-template-columns:max-content max-content;
  justify-content:center;
  column-gap:8px;
}

.drama-mcprog-meta-label{
  font-weight:700;
  color:#111827;
  white-space:nowrap;
  margin-right:2px;
}

.drama-mcprog-meta-date,
.drama-mcprog-meta-weekday,
.drama-mcprog-meta-time{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:15px;
}

.drama-mcprog-meta-value{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-size:15px;
}

.drama-mcprog-bar{
  width:100%;
  height:14px;
  background:#f3f4f6;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:10px;
}
.drama-mcprog-bar-inner{
  height:100%;
  border-radius:999px;
}
.drama-mcprog-bottom{
  font-weight:700;
  margin-bottom:6px;
}
/* ★ 「次回：」行の装飾★
   背景色を変えたい場合は background を、左ボーダー色は border-left-color を変更してください。
*/
.drama-mcprog-next{
  margin-top: 12px;
  padding: 14px 16px;          /* ← 内側余白 */
  background: rgb(255, 244, 217); /* ★ 薄い黄色ベージュ背景 */
  border-left: 6px solid rgb(226, 164, 0); /* ★ 左ゴールドボーダー */
  border-radius: 14px;         /* ← 角丸 */
  color: rgb(107, 75, 0);      /* ★ 文字色（濃い茶色） */
  font-size: 16px;             /* ★ フォントサイズ ← ここを変更 */
  font-weight: 700 !important;
  text-align: center;
  line-height: 1.5;
}

@media (max-width:767px){
  .drama-mcprog-grid{grid-template-columns:1fr}
  .drama-mcprog-meta-row{
    column-gap:5px;
  }
  .drama-mcprog-meta-row.is-simple{
    column-gap:6px;
  }
}

/* =========================================
   関連番組 / 関連記事
   drama-related-gridtime-v7 専用
   軽量版
========================================= */

.drama-related-gridtime-v7{
  margin: 44px 0 0;
  padding: 22px;
  background: #fff;
  border: 1px solid #eee3ea;
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}

/* ★ 関連番組タイトル：薄いグレー背景・フォントサイズ縮小 ★
   フォントサイズを変えたい場合は font-size の値を調整してください。
   背景色を変えたい場合は background の値を調整してください。
*/
.drama-related-gridtime-v7__heading{
  margin: 0 0 18px;
  padding: 10px 16px;  /* ← 元: 14px 18px */
  background: #f2f2f2; /* ★ 薄いグレー背景（元: #faf6f8 ピンク系） */
  border: 1px solid #e0e0e0; /* ★ グレー枠線（元: #f0e2e8 ピンク系） */
  border-radius: 10px; /* ← 元: 16px */
  color: #333;         /* ← 元: #222 */
  font-size: 20px;     /* ★ フォントサイズ縮小（元: 28px）← ここを変更 */
  line-height: 1.35;
  text-align: center;  /* ★ 中央寄せ（元: left） */
}

.drama-related-gridtime-v7__list{
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

.drama-related-gridtime-v7__item{
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr) !important;
  gap: 18px;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #f2ebef;
  border-radius: 18px;
}

.drama-related-gridtime-v7__thumb{
  width: 132px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  background: #f3f3f3;
  text-decoration: none;
}

.drama-related-gridtime-v7__thumb img{
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drama-related-gridtime-v7__noimage{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  color: #888;
  font-size: 12px;
}

.drama-related-gridtime-v7__body{
  min-width: 0;
}

.drama-related-gridtime-v7__title{
  margin: 0 0 10px;
  padding: 0 0 6px;
  border-bottom: 1px solid #f2d4e1;
  color: #333;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.drama-related-gridtime-v7__title a{
  color: inherit;
  text-decoration: none;
}

.drama-related-gridtime-v7__title a:hover{
  color: #c85b84;
}

.drama-related-gridtime-v7__category{
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 11px;
  font-size: 13px;
  line-height: 1.2;
  color: #666;
  background: #f8f4f6;
  border: 1px solid #ece2e7;
  border-radius: 999px;
}

.drama-related-gridtime-v7__time{
  display: inline-block;
  font-size: 17px;
  line-height: 1.55;
  color: #222;
}

.drama-related-gridtime-v7__status{
  margin-top: 10px;
}

.drama-related-gridtime-v7__status-tag{
  display: inline-block;
  font-size: 12px;
  line-height: 1.2;
  color: #7a5b00;
  background: #fff7db;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid #f0dfa3;
}

@media (max-width: 767px){
  .drama-related-gridtime-v7{
    margin: 28px 0 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* スマホでも薄いグレー背景を維持 */
  .drama-related-gridtime-v7__heading{
    margin: 0 0 16px;
    padding: 8px 14px;  /* ← 元: 0 */
    background: #f2f2f2; /* ★ スマホでも薄いグレー背景を維持 */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 18px;    /* ★ スマホ用フォントサイズ（元: 22px）← ここを変更 */
    text-align: center; /* ★ 中央寄せ（元: left） */
  }

  .drama-related-gridtime-v7__list{
    gap: 20px;
  }

  .drama-related-gridtime-v7__item{
    grid-template-columns: 100px minmax(0, 1fr) !important;
    gap: 14px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .drama-related-gridtime-v7__thumb{
    width: 100px;
    border-radius: 12px;
  }

  .drama-related-gridtime-v7__body,
  .drama-related-gridtime-v7__title,
  .drama-related-gridtime-v7__time{
    text-align: center;
  }

  .drama-related-gridtime-v7__title{
    margin: 0 0 8px;
    padding: 0 0 4px;
    font-size: 15px;
    line-height: 1.35;
  }

  .drama-related-gridtime-v7__category{
    margin: 0 0 8px;
    padding: 5px 10px;
    font-size: 13px;
  }

  .drama-related-gridtime-v7__time{
    font-size: 13px;
    line-height: 1.4;
  }

  .drama-related-gridtime-v7__status{
    display: none !important;
  }
}

/* =========================================
   グリッド
   A グリッド 完成版 から移すCSS
========================================= */

/* ------------------------------
 * 全体
 * ------------------------------ */
.nm-grid-wrap--capture{
	/* ★ ネガティブマージンを除去→白背景コンテナに正しく乗るように修正 */
	margin-left: 0;
	margin-right: 0;
	box-sizing:border-box;
	scroll-margin-top:24px;
}

.nm-grid-wrap--capture .nm-grid{
	display:grid;
	grid-template-columns:repeat(var(--nm-cols-d,3),minmax(0,1fr));
	gap:var(--nm-gap,2px);
}

/* ------------------------------
 * カード
 * ------------------------------ */
.nm-grid-wrap--capture .nm-grid-card{
	position:relative;
	overflow:hidden;
	min-width:0;
	isolation:isolate;
}

.nm-grid-wrap--capture .nm-grid-link{
	position:relative;
	z-index:1;
	display:block;
	color:#fff;
	text-decoration:none;
	background:#111;
}

.nm-grid-wrap--capture .nm-grid-media{
	position:relative;
	aspect-ratio:5/6;
	overflow:hidden;
	background:#111;
}

.nm-grid-wrap--capture .nm-grid-thumb-img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.nm-grid-wrap--capture .nm-grid-thumb-placeholder{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	min-height:180px;
	background:#222;
	color:#bbb;
	font-size:12px;
	letter-spacing:.08em;
}

/* ------------------------------
 * カテゴリバッジ
 * ------------------------------ */
.nm-grid-wrap--capture .nm-grid-badge{
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	display:inline-block;
	padding:5px 9px 6px;
	border-radius:0;
	color:#fff !important;
	font-size:14px;
	line-height:1.15;
	font-weight:700;
	letter-spacing:.02em;
	background:#666;
	text-decoration:none !important;
	pointer-events:auto;
}

.nm-grid-wrap--capture .nm-grid-badge:hover{
	color:#fff !important;
	text-decoration:none !important;
	opacity:.96;
}

.nm-grid-wrap--capture .nm-grid-badge--red{background:#d9534f;}
.nm-grid-wrap--capture .nm-grid-badge--blue{background:#2f6fdd;}
.nm-grid-wrap--capture .nm-grid-badge--green{background:#2f9e44;}
.nm-grid-wrap--capture .nm-grid-badge--purple{background:#7a4cc2;}
.nm-grid-wrap--capture .nm-grid-badge--netflix{background:#b20710;}
.nm-grid-wrap--capture .nm-grid-badge--unext{background:#111111;}
.nm-grid-wrap--capture .nm-grid-badge--disneyplus{background:#5bc0eb;}
.nm-grid-wrap--capture .nm-grid-badge--prime{background:#f39c12;}
.nm-grid-wrap--capture .nm-grid-badge--default{background:#666;}

/* ------------------------------
 * 画像下の影とキャプション
 * ------------------------------ */
.nm-grid-wrap--capture .nm-grid-shadow{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:52%;
	z-index:1;
	background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.52) 45%,rgba(0,0,0,0) 100%);
	pointer-events:none;
}

.nm-grid-wrap--capture .nm-grid-caption{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	z-index:2;
	display:grid;
	grid-template-rows:auto auto;
	row-gap:3px;
	align-content:end;
	padding:0 4px 8px;
	min-height:78px;
	background:transparent;
	color:#fff;
	box-sizing:border-box;
	text-align:left;
}

.nm-grid-wrap--capture .nm-grid-card-title{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	width:100%;
	color:#fff;
	font-size:17px;
	line-height:1.3;
	font-weight:700;
	margin:0;
	text-shadow:0 1px 2px rgba(0,0,0,.55);
	word-break:break-word;
	text-align:left;
	max-height:calc(1.3em * 2);
}

.nm-grid-wrap--capture .nm-grid-time{
	display:block;
	align-self:end;
	color:#fff;
	font-size:16px;
	line-height:1.2;
	font-weight:500;
	letter-spacing:0;
	font-family:inherit;
	background:transparent;
	padding:0;
	border-radius:0;
	text-align:left;
	text-shadow:0 1px 2px rgba(0,0,0,.55);
	white-space:nowrap;
}

/* ------------------------------
 * グリッドタイトル
 * ------------------------------ */

/*
   ★ グリッド見出しの上下空間調整

   padding（上の空間）はアーカイブページ専用に設定しています。
   固定ページ（body.page）では padding: 0 にリセットされます。

   「見出しとグリッドの間」の調整方法:
     margin-bottom を大きくする → 見出しとグリッドの間が広がる
     例: 4px（狭め）/ 8px / 10px（現在）/ 14px（元の広さ）/ 20px（広め）

   「見出しテキストの下の余白」の調整方法:
     .nm-grid-title の padding-bottom を大きくする → ボーダーまでの間が広がる
     例: 4px（狭め）/ 6px（現在）/ 10px（元の広さ）
*/

/* 全ページ共通: 見出しとグリッドの間のみ設定 */
.nm-grid-wrap--capture .nm-grid-heading{
	margin: 0 0 10px;  /* ★ 見出しとグリッドの間 ← この値を変えると広くなる（例: 4px/8px/10px/14px/20px） */
	padding: 0; /* 固定ページではpaddingなし。アーカイブ専用の上空間は下のセレクタで設定 */
}

/* ★ アーカイブページ専用: 見出しの上の空間（固定ページには影響しない） */
body.archive .nm-grid-wrap--capture .nm-grid-heading,
body.category .nm-grid-wrap--capture .nm-grid-heading,
body.tag .nm-grid-wrap--capture .nm-grid-heading,
body.date .nm-grid-wrap--capture .nm-grid-heading,
body.search .nm-grid-wrap--capture .nm-grid-heading {
	padding: 2px 2px 0; /* ★ アーカイブ用 見出しの上の空間 ← 最初の値（2px）を変える（例: 0/4px/8px/12px/16px） */
}

.nm-grid-wrap--capture h1.nm-grid-title,
.nm-grid-wrap--capture h2.nm-grid-title,
.nm-grid-wrap--capture h3.nm-grid-title,
.nm-grid-wrap--capture h4.nm-grid-title,
.nm-grid-wrap--capture h5.nm-grid-title,
.nm-grid-wrap--capture h6.nm-grid-title{
	margin:0 !important;
	padding:0 0 6px !important; /* ★ テキストとボーダーの間 ← この値を変える（例: 4px/6px/10px） */
	color:#666 !important;
	font-weight:700 !important;
	line-height:1.35 !important;
	letter-spacing:.02em;
	border-bottom:2px solid #f0d6df;
	text-decoration:none !important;
}

/* h1 は h2 と同じ装飾を適用 */
.nm-grid-wrap--capture h1.nm-grid-title{font-size:14px !important;}
.nm-grid-wrap--capture h2.nm-grid-title{font-size:14px !important;}
.nm-grid-wrap--capture h3.nm-grid-title{font-size:20px !important;}
.nm-grid-wrap--capture h4.nm-grid-title{font-size:18px !important;}
.nm-grid-wrap--capture h5.nm-grid-title{font-size:16px !important;}
.nm-grid-wrap--capture h6.nm-grid-title{font-size:15px !important;}

.nm-grid-wrap--capture .nm-grid-empty{
	margin:0;
}

/* ------------------------------
 * ページネーション
 * ------------------------------ */
.nm-grid-wrap--capture .nm-grid-pagination{
	margin:24px 0 32px;
}

.nm-grid-wrap--capture .nm-grid-pagination .page-numbers{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:8px;
	list-style:none;
	margin:0;
	padding:0;
}

.nm-grid-wrap--capture .nm-grid-pagination li{
	margin:0;
	padding:0;
	list-style:none;
}

.nm-grid-wrap--capture .nm-grid-pagination a,
.nm-grid-wrap--capture .nm-grid-pagination span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:50px;
	height:50px;
	padding:0 14px;
	border:1px solid #ddd;
	border-radius:8px;
	background:#fff;
	color:#333;
	text-decoration:none;
	line-height:1;
	font-size:16px;
	box-sizing:border-box;
}

.nm-grid-wrap--capture .nm-grid-pagination a:hover{
	opacity:.85;
}

.nm-grid-wrap--capture .nm-grid-pagination .current{
	background:#333;
	border-color:#333;
	color:#fff;
	font-weight:700;
}

.nm-grid-wrap--capture .nm-grid-pagination .dots{
	border:none;
	background:transparent;
	min-width:auto;
	padding:0 2px;
}

/* ------------------------------
 * タブレット
 * ------------------------------ */
@media (max-width:1024px){
	.nm-grid-wrap--capture .nm-grid{
		grid-template-columns:repeat(var(--nm-cols-t,3),minmax(0,1fr));
	}

	.nm-grid-wrap--capture .nm-grid-badge{
		font-size:13px;
		padding:4px 8px 5px;
	}

	.nm-grid-wrap--capture .nm-grid-caption{
		padding:0 4px 8px;
		min-height:72px;
	}

	.nm-grid-wrap--capture .nm-grid-card-title{
		font-size:17px;
		line-height:1.28;
		max-height:calc(1.28em * 2);
	}

	.nm-grid-wrap--capture .nm-grid-time{
		font-size:15px;
		font-weight:500;
	}

	/* h1 は h2 と同じ装飾を適用 */
	.nm-grid-wrap--capture h1.nm-grid-title{font-size:15px !important;}
	.nm-grid-wrap--capture h2.nm-grid-title{font-size:15px !important;}
	.nm-grid-wrap--capture h3.nm-grid-title{font-size:18px !important;}
	.nm-grid-wrap--capture h4.nm-grid-title{font-size:17px !important;}
	.nm-grid-wrap--capture h5.nm-grid-title{font-size:15px !important;}
	.nm-grid-wrap--capture h6.nm-grid-title{font-size:14px !important;}

	.nm-grid-wrap--capture .nm-grid-pagination a,
	.nm-grid-wrap--capture .nm-grid-pagination span{
		min-width:46px;
		height:46px;
		font-size:15px;
	}
}

/* ------------------------------
 * スマホ
 * ------------------------------ */
@media (max-width:767px){
	.nm-grid-wrap--capture{
		margin-left: 0; /* ★ スマホ用ネガティブマージンを除去 */
		margin-right: 0;
	}

	.nm-grid-wrap--capture .nm-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.nm-grid-wrap--capture .nm-grid-badge{
		font-size:12px;
		padding:4px 7px 4px;
	}

	.nm-grid-wrap--capture .nm-grid-caption{
		padding:0 3px 7px;
		min-height:66px;
		row-gap:2px;
	}

	.nm-grid-wrap--capture .nm-grid-card-title{
		font-size:16px;
		line-height:1.26;
		max-height:calc(1.26em * 2);
	}

	.nm-grid-wrap--capture .nm-grid-time{
		font-size:14px;
		font-weight:500;
	}

	/* 全ページ共通: 見出しとグリッドの間のみ */
	.nm-grid-wrap--capture .nm-grid-heading{
		margin: 0 0 8px !important;       /* ★ 見出しとグリッドの間 ← 値を変える（例: 4px/6px/8px/14px/20px） */
		padding: 0 !important;             /* 固定ページではpaddingなし。アーカイブ専用の上空間は下のセレクタで設定 */
	}

	/* ★ アーカイブページ専用: 見出しの上の空間（スマホ） */
	body.archive .nm-grid-wrap--capture .nm-grid-heading,
	body.category .nm-grid-wrap--capture .nm-grid-heading,
	body.tag .nm-grid-wrap--capture .nm-grid-heading,
	body.date .nm-grid-wrap--capture .nm-grid-heading,
	body.search .nm-grid-wrap--capture .nm-grid-heading {
		padding: 6px 1px 0 !important;    /* ★ アーカイブ用 見出しの上の空間（スマホ） ← 最初の値（6px）を変える（例: 0/4px/6px/10px/16px） */
	}

	/* h1 は h2 と同じ装飾を適用 */
	.nm-grid-wrap--capture h1.nm-grid-title{font-size:14px !important;}
	.nm-grid-wrap--capture h2.nm-grid-title{font-size:14px !important;}
	.nm-grid-wrap--capture h3.nm-grid-title{font-size:17px !important;}
	.nm-grid-wrap--capture h4.nm-grid-title{font-size:16px !important;}
	.nm-grid-wrap--capture h5.nm-grid-title{font-size:14px !important;}
	.nm-grid-wrap--capture h6.nm-grid-title{font-size:13px !important;}

	.nm-grid-wrap--capture .nm-grid-pagination{
		margin-top:24px;
	}

	.nm-grid-wrap--capture .nm-grid-pagination .page-numbers{
		gap:8px;
	}

	.nm-grid-wrap--capture .nm-grid-pagination a,
	.nm-grid-wrap--capture .nm-grid-pagination span{
		min-width:42px;
		height:42px;
		padding:0 12px;
		font-size:15px;
	}
}

/* ------------------------------
 * スマホ横向き
 * ------------------------------ */
@media (orientation:landscape) and (max-width:1024px) and (max-height:500px){
	.nm-grid-wrap--capture .nm-grid{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

.kst-rank-wrap{
  margin:18px 0;
}

.kst-rank-title{
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}

.kst-rank-list{
  display:grid;
  gap:12px;
}

.kst-rank-item{
  position:relative;
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:12px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  min-height:110px;
}

.kst-rank-thumb{
  display:block;
  width:110px;
  height:110px;
  border-radius:8px;
  overflow:hidden;
  background:#f3f4f6;
}

.kst-rank-thumb img{
  display:block;
  width:110px;
  height:110px;
  object-fit:cover;
}

.kst-rank-thumb-placeholder{
  width:110px;
  height:110px;
  background:#eef2f7;
}

.kst-rank-body{
  min-width:0;
  min-height:110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:visible;
  padding-top:0;
}

.kst-rank-post-title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  line-height:1.45;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  word-break:break-word;
}

.kst-rank-post-title a{
  color:#111827;
  text-decoration:none;
}

.kst-rank-post-title a:hover{
  text-decoration:underline;
}

.kst-rank-category{
  margin:0 0 3px;
  font-size:16px;
  line-height:1.4;
  color:#4b5563;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kst-rank-category a{
  color:#4b5563;
  text-decoration:none;
}

.kst-rank-category a:hover{
  text-decoration:underline;
}

.kst-rank-time{
  margin:0;
  font-size:16px;
  line-height:1.45;
  color:#6b7280;
  overflow:hidden;
}

.kst-rank-time *{
  color:inherit;
  font-size:inherit;
  line-height:inherit;
}

.kst-rank-badge{
  position:absolute;
  top:7px;
  left:7px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:32px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}

.kst-rank-badge.rank-1{
  background:#d4af37;
  color:#fff;
}

.kst-rank-badge.rank-2{
  background:#9ca3af;
  color:#fff;
}

.kst-rank-badge.rank-3{
  background:#b87333;
  color:#fff;
}

.kst-rank-badge.rank-other{
  background:#111827;
  color:#fff;
}

.kst-rank-empty{
  margin:0;
  padding:12px;
  text-align:center;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  color:#6b7280;
  font-size:12px;
  line-height:1.5;
}

.kst-builder-wrap{
  margin:18px 0;
  padding:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.kst-builder-title{
  margin:0 0 14px;
  font-size:18px;
  line-height:1.5;
}

.kst-builder-grid{
  display:grid;
  gap:12px;
}

.kst-builder-field label{
  display:block;
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}

.kst-builder-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:14px;
  line-height:1.4;
  background:#fff;
}

.kst-builder-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}

.kst-builder-btn{
  appearance:none;
  border:1px solid #d1d5db;
  background:#fff;
  color:#111827;
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
}

.kst-builder-btn.primary{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.kst-builder-output-wrap label{
  display:block;
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}

.kst-builder-output{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:12px;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:13px;
  line-height:1.5;
  background:#f9fafb;
}

.kst-builder-samples{
  display:grid;
  gap:10px;
  margin-top:14px;
}

.kst-builder-sample-box{
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:8px;
  background:#fafafa;
}

.kst-builder-sample-label{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  color:#6b7280;
}

.kst-builder-sample-box code{
  display:block;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  line-height:1.5;
}

@media (max-width:480px){
  .kst-rank-item{
    grid-template-columns:96px minmax(0,1fr);
    gap:10px;
    padding:10px;
  }

  .kst-rank-thumb,
  .kst-rank-thumb img,
  .kst-rank-thumb-placeholder{
    width:96px;
    height:96px;
  }

  .kst-rank-body{
    min-height:96px;
  }

  .kst-rank-post-title{
    font-size:15px;
    margin:0 0 6px;
    line-height:1.45;
  }

  .kst-rank-category{
    font-size:13px;
  }

  .kst-rank-time{
    font-size:14px;
  }
}

/* =========================================
   ★ アーカイブレイアウト（functions.phpから移行）
   ※ 以前は functions.php の kst_archive_grid_print_style() で
      インラインstyleとして出力していた内容をここに統合しました。
========================================= */

/* アーカイブ全体レイアウトのパディング
   ★ 上の空間（ヘッダーとの間隔）を変えたい場合:
     padding-top の値を変える（例: 0/4px/8px/12px/16px/20px）
   ★ 左右の余白を変えたい場合:
     padding-left / padding-right の値を変える（例: 12px/16px/20px/24px）
   ★ 下の空間を変えたい場合:
     padding-bottom の値を変える（例: 20px/32px/40px）
*/
.kst-archive-layout {
  padding-top: 8px;    /* ★ PC用 上の空間 ← ここを変える（例: 0/4px/8px現在/12px/16px） */
  padding-left: 16px;   /* ★ PC用 左の余白 ← 固定ページと同じ 16px */
  padding-right: 16px;  /* ★ PC用 右の余白 ← 固定ページと同じ 16px */
  padding-bottom: 40px;
}

@media (max-width: 860px) {
  .kst-archive-layout {
    padding-top: 8px;   /* ★ タブレット用 上の空間 ← ここを変える（例: 0/4px/8px現在/12px/16px） */
    padding-bottom: 32px;
  }
}

@media (max-width: 767px) {
  .kst-archive-layout {
    padding-top: 6px;      /* ★ スマホ用 上の空間 ← ここを変える（0px=なし / 2px / 4px / 6px現在 / 10px） */
    padding-left: 2px;     /* ★ スマホ用 アーカイブ左余白 ← ここを変える（0px=なし / 2px現在 / 4px / 8px / 12px / 16px） */
    padding-right: 2px;    /* ★ スマホ用 アーカイブ右余白 ← 左と同じ値にする */
    padding-bottom: 32px;
  }
}

/* アーカイブ見出しエリア（カテゴリ名の上下マージン） */
.kst-archive-head {
  margin: 0 0 8px; /* ★ 見出しエリアの下マージン ← 値を変える（8px/12px/16px） */
}

/* アーカイブカテゴリ名テキスト（大きいタイトル） */
.kst-archive-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 700;
}

@media (max-width: 860px) {
  .kst-archive-title {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .kst-archive-title {
    font-size: 22px;
  }
}

/* アーカイブカテゴリ説明文 */
.kst-archive-desc {
  margin: 0;
  color: #555;
  font-size: 14px;
  line-height: 1.9;
}

.kst-archive-desc p {
  margin: 0 0 10px;
}

.kst-archive-desc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .kst-archive-desc {
    font-size: 13px;
    line-height: 1.8;
  }
}

/* アーカイブメインカラム（サイドバーの幅を正しく保つため必須） */
.kst-archive-main {
  min-width: 0;
}

/* アーカイブ内グリッドの上マージンをゼロに */
.kst-archive-main .nm-grid-wrap--capture {
  margin-top: 0;
}

/* アーカイブ内「記事なし」表示 */
.kst-archive-main .nm-grid-empty {
  margin: 0;
  padding: 18px 0;
}

/* =========================================
   アーカイブ見出しだけ元の雰囲気へ戻す
   ※ グリッドには触らない
========================================= */

/* =========================================
   ★ アーカイブ見出し → 固定ページのグリッド見出しデザインに統一
   参照元: .nm-grid-title のスタイル
========================================= */

/* ★ アーカイブ見出しのラッパー余白
   ここの値を変えると見出しの上下の空間が変わります。

   「上の空間」の調整方法:
     padding-top を大きくする → 見出しの上が広がる
     例: 8px（少し）/ 16px（現在）/ 24px（広め）/ 32px（さらに広め）

   「下の空間」の調整方法:
     margin-bottom を大きくする → 見出しとグリッドの間が広がる
     例: 8px（少し）/ 14px（現在）/ 20px（広め）
========================================= */
.kst-archive-head,
body.archive .kst-archive-head,
body.category .kst-archive-head,
body.tag .kst-archive-head,
body.date .kst-archive-head,
body.search .kst-archive-head {
  padding: 0px 2px 0;      /* ★ 上の空間 ← 最初の値を変える（0px現在=なし / 4px / 8px / 12px / 16px） */
  margin-top: 0;
  margin-bottom: 10px;     /* ★ 下の空間 ← この値を変えると見出しとグリッドの間が広がる（例: 4px/8px/10px/14px） */
  text-align: left;
}

/* ★ アーカイブ見出し本体（.nm-grid-title h2 のスタイルに小さく合わせ） */
.kst-archive-title,
body.archive .kst-archive-title,
body.category .kst-archive-title,
body.tag .kst-archive-title,
body.date .kst-archive-title,
body.search .kst-archive-title {
  margin: 0;
  padding: 0 0 10px;       /* ← .nm-grid-titleの padding: 0 0 10px に小さく合わせ */
  text-align: left;
  font-size: 14px;         /* ← .nm-grid-title h2の 14px に小さく合わせ */
  line-height: 1.35;       /* ← .nm-grid-titleの line-height: 1.35 に小さく合わせ */
  font-weight: 700;
  letter-spacing: .02em;   /* ← .nm-grid-titleの letter-spacing に小さく合わせ */
  color: #666;
  border-bottom: 2px solid #f0d6df; /* ← .nm-grid-titleのボーダー色に小さく合わせ */
}

.kst-archive-desc,
body.archive .kst-archive-desc,
body.category .kst-archive-desc,
body.tag .kst-archive-desc,
body.date .kst-archive-desc,
body.search .kst-archive-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

/*
   ★ アーカイブ見出し PC用（min-width: 1025px）
   左右のネガティブマージンを除去して固定ページと同じ左位置に揃えています。
   左右位置を調整したい場合は margin-left / margin-right の値を変えてください。
   例: 0（現在・グリッドと揃える）/ -8px（少し左へ）/ -18px（元の設定）
*/
@media (min-width: 1025px) {
  .kst-archive-head,
  body.archive .kst-archive-head,
  body.category .kst-archive-head,
  body.tag .kst-archive-head,
  body.date .kst-archive-head,
  body.search .kst-archive-head {
    margin-left: 0;   /* ★ PC左位置 ← 値を変えると左右に動く（例: 0 / -8px / -18px） */
    margin-right: 0;  /* ★ PC右位置 ← 左と同じ値にする */
    padding-top: 0px;  /* ★ PC上の空間 ← ここを変える（0px現在=なし / 4px / 8px / 12px / 16px） */
    margin-bottom: 10px; /* ★ PC下の空間 ← 値を変えると見出しとグリッドの間が広がる（例: 4px/8px/10px/14px） */
  }
}

/*
   ★ アーカイブ見出し タブレット用（768px〜1024px）
*/
@media (min-width: 768px) and (max-width: 1024px) {
  .kst-archive-head,
  body.archive .kst-archive-head,
  body.category .kst-archive-head,
  body.tag .kst-archive-head,
  body.date .kst-archive-head,
  body.search .kst-archive-head {
    margin-left: 0;    /* ★ タブレット左位置 ← 値を変えると左右に動く（例: 0 / -8px / -16px） */
    margin-right: 0;   /* ★ タブレット右位置 ← 左と同じ値にする */
    padding-top: 0px; /* ★ タブレット上の空間 ← ここを変える（0px現在=なし / 6px / 10px / 14px / 18px） */
    margin-bottom: 8px; /* ★ タブレット下の空間 ← 値を変えると見出しとグリッドの間が広がる */
  }
}

/*
   ★ アーカイブ見出し スマホ用（max-width: 767px）
*/
@media (max-width: 767px) {
  .kst-archive-head,
  body.archive .kst-archive-head,
  body.category .kst-archive-head,
  body.tag .kst-archive-head,
  body.date .kst-archive-head,
  body.search .kst-archive-head {
    margin-left: 0;    /* ★ スマホ左位置 ← 値を変えると左右に動く（例: 0 / -8px / -14px） */
    margin-right: 0;   /* ★ スマホ右位置 ← 左と同じ値にする */
    margin-top: 0;
    padding-top: 0px;  /* ★ スマホ上の空間 ← ここを変える（0px現在=なし / 2px / 4px / 6px / 10px） */
    margin-bottom: 8px; /* ★ スマホ下の空間 ← 値を変えると見出しとグリッドの間が広がる（例: 4px/8px/14px） */
  }

  /* ★ スマホ用アーカイブ見出しテキスト */
  .kst-archive-title,
  body.archive .kst-archive-title,
  body.category .kst-archive-title,
  body.tag .kst-archive-title,
  body.date .kst-archive-title,
  body.search .kst-archive-title {
    font-size: 14px;   /* ★ スマホ用フォントサイズ ← 値を変える（例: 12px/14px/16px） */
    line-height: 1.35;
    padding: 0 0 6px;  /* ★ テキストとボーダーの間 ← 値を変える（例: 4px/6px/10px） */
  }

  .kst-archive-desc,
  body.archive .kst-archive-desc,
  body.category .kst-archive-desc,
  body.tag .kst-archive-desc,
  body.date .kst-archive-desc,
  body.search .kst-archive-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* =========================================
   記事タイトル
   実コード確認済みの見た目だけを統合
========================================= */

.post-item.single-entry .entry-header,
.single.single-post .entry-header {
  text-align: center;
}

.post-item.single-entry .entry-header .entry-title,
.single.single-post .entry-header .entry-title {
  display: inline-block;
  margin: 0 auto 18px;
  padding: 0 0 8px;
  color: #333;
  font-size: 24px;
  line-height: 1.45;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  text-align: center;
  border-bottom: 2px solid #f2d4e1;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.post-item.single-entry .entry-header .entry-title a,
.single.single-post .entry-header .entry-title a {
  color: #333;
  text-decoration: none;
}

.post-item.single-entry .entry-header .entry-title a:hover,
.single.single-post .entry-header .entry-title a:hover {
  color: #c85b84;
  text-decoration: none;
}

@media (max-width: 767px) {
  .post-item.single-entry .entry-header .entry-title,
  .single.single-post .entry-header .entry-title {
    margin: 0 auto 10px;
    padding: 0 0 6px;
    font-size: 22px;
    line-height: 1.35;
  }
}

/* =========================================
   サイドバー手書きリンク
   .kst-side-links 専用
   薄いピンク系デザイン
========================================= */

.kst-side-links,
.widget_nav_menu .menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kst-side-links a,
.widget_nav_menu .menu a {
  display: block;
  padding: 12px 14px;
  background: #fff7fa;
  border: 1px solid #f2dbe4;
  border-radius: 12px;
  color: #8a5a6d;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.kst-side-links a:hover,
.widget_nav_menu .menu a:hover {
  background: #fdeff5;
  border-color: #e8c7d5;
  color: #c85b84;
  transform: translateY(-1px);
}

.kst-side-links a:focus-visible,
.widget_nav_menu .menu a:focus-visible {
  outline: 2px solid #e7b8c9;
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .kst-side-links,
  .widget_nav_menu .menu {
    gap: 8px;
  }

  .kst-side-links a,
  .widget_nav_menu .menu a {
    padding: 11px 12px;
    font-size: 13px;
  }
}

/* =========================================
   全体フォントを M PLUS Rounded 1c に変更
   Light寄りベース
========================================= */

html,
body,
button,
input,
select,
textarea,
.site,
.site-content,
.site-main,
.entry-content,
.post-content,
.widget,
.sidebar,
.archive,
.single,
.page,
p,
li,
dt,
dd,
th,
td,
caption,
label,
small,
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.post-title,
.widget-title,
.archive-title,
.page-title,
.kst-archive-title,
.kst-header,
.kst-header__title,
.kst-header__description,
.kst-header__nav .kst-main-menu > li > a,
.kst-header__nav .menu > ul > li > a,
.kst-header__nav > div > ul > li > a,
.kst-drawer-menu a,
.kst-drawer__nav .menu a,
.kst-drawer__nav > div > ul a,
.kst-side-links a,
.drama-related-gridtime-v7__title,
.drama-related-gridtime-v7__title a {
  font-family: "M PLUS Rounded 1c", sans-serif !important;
}

/* 本文は Light 寄り */
body,
.site,
.site-content,
.site-main,
.entry-content,
.post-content,
.widget,
.sidebar,
.archive,
.single,
.page,
p,
li,
dt,
dd,
th,
td,
caption,
label,
small {
  font-weight: 500 !important;
}

/* 見出しとメニューは少し見やすく */
h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.post-title,
.widget-title,
.archive-title,
.page-title,
.kst-archive-title,
.kst-header__nav .kst-main-menu > li > a,
.kst-header__nav .menu > ul > li > a,
.kst-header__nav > div > ul > li > a,
.kst-drawer-menu a,
.kst-drawer__nav .menu a,
.kst-drawer__nav > div > ul a,
.kst-side-links a,
.drama-related-gridtime-v7__title,
.drama-related-gridtime-v7__title a {
  font-weight: 500 !important;
}

/* =========================================
   ★ 記事タイトル左上のカテゴリバッジ ★
   single.php で出力される .entry-category-label のスタイルです。
   バッジ色は 5_kst_grid スニペットの nmg_get_badge_class() と同じ色体系を使用しています。
   フォントサイズを変えたい場合は font-size を調整してください。
   表示を消したい場合は single.php 側のカテゴリブロックを削除してください。
========================================= */

/* カテゴリバッジのラッパー */
.entry-category-label {
  display: block;
  margin: 0 0 8px;  /* ← タイトルとの間隔。大きくすると離れます */
  text-align: left; /* ★ バッジを左上に配置 */
}

/* カテゴリバッジのリンク（共通ベース） */
.entry-category-label__link {
  display: inline-block;
  padding: 4px 10px;             /* ← バッジの内側余白 */
  background: #666666;           /* デフォルト色（default） */
  color: #ffffff;                /* 文字色（白固定） */
  font-size: 12px;               /* ★ フォントサイズ ← ここを変更 */
  font-weight: 700;
  line-height: 1.4;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.entry-category-label__link:hover {
  opacity: 0.85;
  color: #ffffff;
  text-decoration: none;
}

/* ★ カテゴリ別バッジ色（nmg_get_badge_class() の戻り値に対応）★
   色を変えたい場合は各 background の値を修正してください。
   カテゴリ名と色の対応は 5_kst_grid スニペットの nmg_get_badge_class() で管理しています。
*/
.entry-category-label__link--red      { background: #d9534f; } /* CS / アジアドラマチックTV など */
.entry-category-label__link--blue     { background: #2f6fdd; } /* BS系 */
.entry-category-label__link--green    { background: #2f9e44; } /* 地上波系 */
.entry-category-label__link--purple   { background: #7a4cc2; } /* WOWOW */
.entry-category-label__link--netflix  { background: #b20710; } /* Netflix */
.entry-category-label__link--unext    { background: #111111; } /* U-NEXT */
.entry-category-label__link--disneyplus { background: #5bc0eb; } /* Disney+ */
.entry-category-label__link--prime    { background: #f39c12; } /* Amazon Prime */
.entry-category-label__link--default  { background: #666666; } /* その他 */

/* =========================================
   ★ サイト外側のグレー背景 ★
   body をグレーにして、サイト本体（白背景）の外側がグレーに見える仕組みです。
   参考サイト（kandorastart.com）と同じ色 rgb(239, 239, 239) を使用しています。

   グレーの色を変えたい場合は body の background-color を変更してください。
   例: #e8e8e8（少し濃いグレー）/ #f0f0f0（少し薄いグレー）/ #f5f5f5（ほぼ白）
========================================= */

/* body 全体をグレーに */
body {
  background-color: rgb(239, 239, 239) !important; /* ★ 外側グレー背景 ← ここを変更 */
}

/* サイト本体コンテナを白背景に（グレーとの対比で外側が見える）
   グリッド全体をカバーするため body > 直下のラッパーを白にする。
*/
.site-container,
.site-container--page,
.site-container--single,
.site-main-wrap,
.kst-archive-layout,
.archive-layout,
.site-content,
.content-layout,
.content-layout--page,
.content-layout--single {
  background-color: #ffffff !important; /* ★ コンテンツ白背景 */
}

/* ヘッダーは黒背景を維持 */
.kst-header {
  background-color: #111111 !important;
}

/* =========================================
   ★ フッター（シンプル黒）★
   色を変えたい場合は background-color を変更してください。
========================================= */
.site-footer {
  background-color: #111111 !important;  /* ★ フッター背景色 ← ここを変更 */
  color: #cccccc;             /* ★ フッター文字色 */
  padding: 24px 0;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  /* ★ フッターの横幅をコンテンツと同じmax-widthに制限 */
  max-width: 1140px;
  box-sizing: border-box;
  border-top: 1px solid #333333;
}

.site-footer .site-container,
.site-footer .site-footer-inner {
  background-color: transparent !important; /* フッター内のコンテナは透明に */
  padding-top: 0;
  padding-bottom: 0;
}

.site-footer p {
  margin: 0;
  font-size: 13px;
  color: #aaaaaa;             /* コピーライト文字色 */
  text-align: center;
  line-height: 1.6;
}

.site-footer a {
  color: #cccccc;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* フッターメニュー */
.site-footer .footer-navigation {
  margin: 0 0 12px;
}

.site-footer .footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.site-footer .footer-menu li a {
  color: #cccccc;
  font-size: 13px;
  text-decoration: none;
}

.site-footer .footer-menu li a:hover {
  color: #ffffff;
}

/* =========================================
   ★ 関連記事一覧のカテゴリリンク
   バッジと同じ見た目（グレー・下線なし・ホバー変化なし）
========================================= */
.drama-related-gridtime-v7__category-link {
  color: #555;
  text-decoration: none;
}


/* =========================================
   ★ 固定ページ内グリッドの両端余白
   アーカイブページと同様に左右に1pxずつ内側余白を設けて
   白い背景がグリッドの両端に見えるようにする。
   値を変えたい場合は padding-left / padding-right を調整する。
   例: 1px（現在）/ 2px / 4px / 8px
========================================= */
.page-single .nm-grid-wrap--capture,
.page-entry .nm-grid-wrap--capture,
body.page .entry-content .nm-grid-wrap--capture {
  padding-left:  1px;  /* ★ 固定ページ グリッド左余白 ← ここを変える（例: 1px / 2px / 4px） */
  padding-right: 1px;  /* ★ 固定ページ グリッド右余白 ← 左と同じ値にする */
}

@media (max-width: 767px) {
  .page-single .nm-grid-wrap--capture,
  .page-entry .nm-grid-wrap--capture,
  body.page .entry-content .nm-grid-wrap--capture {
    padding-left:  2px;  /* ★ スマホ グリッド左余白 ← ここを変える */
    padding-right: 2px;  /* ★ スマホ グリッド右余白 ← 左と同じ値にする */
  }
}

/* =========================================
   ★ 固定ページ内グリッド見出しの左位置を調整
   padding-left で文字を右にずらす。
   値を変えたい場合は padding-left の数値を変更する。
   例: 2px（現在）/ 4px / 6px / 8px
   0px にすると元の位置に戻る。
   アーカイブページには影響しない。
========================================= */
.page-single .nm-grid-wrap--capture .nm-grid-title,
.page-entry .nm-grid-wrap--capture .nm-grid-title,
body.page .entry-content .nm-grid-wrap--capture .nm-grid-title {
  padding-left: 5px !important;  /* ★ 見出し文字の左位置 ← ここを変える（例: 2px / 4px / 6px） */
}