@charset "UTF-8";
/*
 * トップページ / ヘッダー / フッター / CTA
 *
 * 方針:
 *  - 囲まない。カードを並べず、罫線と余白と粗密で区切る。
 *  - 数字を主役にする。日付・時刻・料金は欧文書体（Oswald）で、和文より一段大きく。
 *  - 土曜=青 / 日曜=赤。ブランド装飾と購入CTAは赤。
 *  - 和文Webフォントは読み込まない（表示速度のため）。欧文1書体のみ。
 */

:root{
  --ok-paper:#fff;
  --ok-ink:#111417;
  --ok-ink-2:#3d444c;
  --ok-dim:#79828c;
  --ok-rule:#dfe3e8;
  --ok-wash:#f5f7f9;

  --ok-accent:#d93a2b;
  --ok-accent-ink:#d93a2b;
  --ok-accent-bg:#fdeeec;
  --ok-action:#d93a2b;     /* 購入CTA専用 */
  --ok-action-hover:#b52c1f;
  --ok-teal:#0a7385;       /* 配信 */
  --ok-teal-bg:#e3f0f3;
  --ok-blue:#1a63c4;       /* 土曜 */

  --ok-jp:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --ok-en:"Oswald",var(--ok-jp);
}

html{overflow-x:clip}
body{color:var(--ok-ink)}

.ok-fig,.ok-num{font-family:var(--ok-en);font-variant-numeric:tabular-nums;font-weight:600}
.ok-fig small,.ok-num small{font-family:var(--ok-jp);font-size:.72em;font-weight:400;margin-left:2px}

.ok-skip{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
.ok-skip:focus{position:static!important;width:auto;height:auto;clip:auto;clip-path:none;display:inline-block;padding:8px 14px;background:var(--ok-ink);color:#fff}

/* ============================ ヘッダー ============================ */
.ok-header{background:var(--ok-paper);border-bottom:2px solid var(--ok-ink)}
.ok-header__inner{display:flex;align-items:center;gap:24px;min-height:72px}
.ok-header__inner > .ok-logo,.ok-header__inner > .custom-logo-link{flex-shrink:0}
.ok-header__inner > .custom-logo-link img{max-width:160px;max-height:48px;width:auto;object-fit:contain}
.ok-logo{margin:0;line-height:1}
.ok-logo a,.ok-logo--footer{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ok-en);font-size:var(--ok-fs-logo);font-weight:600;letter-spacing:.09em;
  color:var(--ok-ink);text-decoration:none;
}
.ok-logo__dot{width:9px;height:9px;border-radius:50%;background:var(--ok-accent);flex:none}

.ok-search{display:flex;flex:0 1 260px;min-width:0}
.ok-search input{
  flex:1 1 auto;min-width:0;height:44px;padding:0 10px;
  background:var(--ok-wash);border:1px solid var(--ok-rule);border-right:0;border-radius:0;
  font-size:var(--ok-fs-small);color:var(--ok-ink);
}
.ok-search button{flex:none;display:grid;place-items:center;width:38px;height:44px;background:var(--ok-ink);color:#fff;border:0;cursor:pointer}

.ok-nav{margin-left:auto;min-width:0}
.ok-nav ul{display:flex;gap:24px;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none}
.ok-nav ul::-webkit-scrollbar{display:none}
.ok-nav a{
  display:flex;align-items:center;min-height:44px;padding:10px 0;white-space:nowrap;
  font-size:var(--ok-fs-compact);font-weight:700;color:var(--ok-ink);text-decoration:none;
}
.ok-nav a:hover{color:var(--ok-accent-ink)}

/* 狭い画面では検索の幅を確保し、ナビだけを次の行に置く。 */
@media(max-width:899px){
  .ok-header__inner{flex-wrap:wrap;gap:4px 16px;padding-block:10px}
  .ok-header__inner .ok-search{margin-left:auto;flex:1 1 120px;max-width:260px}
  .ok-header__inner .ok-nav{order:3;flex-basis:100%;margin-left:0}
  .ok-nav ul{gap:24px}
}
.ok-has-home-intro .ok-main{padding-top:0}

/* ============================ ヒーロー ============================ */
/* モバイルでは全幅に抜く。トップの印象はここでほぼ決まる。 */
.ok-hero{margin:0 0 var(--ok-space-block);margin-inline:calc(50% - 50vw);width:100vw;background:var(--ok-ink)}
/* オーバーレイの基準は画像。ヒーロー全体を基準にすると下のパネルに重なる。 */
.ok-hero__stage{position:relative}
.ok-hero__media{margin:0;line-height:0}
.ok-hero__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.ok-hero.has-image .ok-hero__overlay{
  position:absolute;left:0;right:0;bottom:0;padding:56px 22px 20px;
  /* 写真は明暗が読めないため、文字が乗る範囲は十分に暗くする。
     アイキャッチが明るい画像でも見出しが沈まないようにする。 */
  background:linear-gradient(to top,
    rgba(10,12,14,.96) 0%,
    rgba(10,12,14,.92) 42%,
    rgba(10,12,14,.62) 72%,
    transparent 100%);
}
.ok-hero__overlay{padding:22px 16px;color:#fff}
.ok-hero__eyebrow{
  display:flex;align-items:baseline;gap:9px;margin:0 0 6px;
  font-size:var(--ok-fs-compact);font-weight:700;color:#fff;
}
.ok-hero__eyebrow span{
  font-family:var(--ok-en);font-size:var(--ok-fs-eyebrow);font-weight:600;letter-spacing:.2em;
  color:var(--ok-accent-ink);
}
.ok-hero__title{margin:0;font-size:var(--ok-fs-hero);font-weight:800;line-height:1.28;letter-spacing:-.015em;text-wrap:balance}
.ok-hero__title a{color:#fff;text-decoration:none}
.ok-hero__when{display:flex;align-items:baseline;gap:8px;margin:10px 0 0}
.ok-hero__date{font-family:var(--ok-en);font-size:var(--ok-fs-hero-num);font-weight:600;line-height:1;letter-spacing:.01em}
.ok-hero__dow{font-size:var(--ok-fs-compact);font-weight:700}
.ok-hero__clock{font-family:var(--ok-en);font-size:var(--ok-fs-fig-sm);font-weight:400;opacity:.85}

.ok-hero__panel{padding:16px;background:var(--ok-paper)}
.ok-hero__facts{margin:0 0 16px;display:flex;flex-direction:column}
.ok-hero__facts > div{display:grid;grid-template-columns:5.5em 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--ok-rule)}
.ok-hero__facts > div:first-child{border-top:1px solid var(--ok-rule)}
.ok-hero__facts dt{font-size:var(--ok-fs-tiny);font-weight:700;color:var(--ok-dim)}
.ok-hero__facts dd{margin:0;font-size:var(--ok-fs-fact);line-height:1.5}
.ok-hero__facts .ok-fig{font-size:var(--ok-fs-fig-sm)}


/* ============================ セクション ============================ */
.ok-sec{margin:0 0 var(--ok-space-sec)}
.ok-sec--urgent{padding-top:4px}
.ok-sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:20px}
.ok-sec__head h2{display:flex;flex-direction:column;gap:3px;margin:0;font-size:var(--ok-fs-sec);font-weight:800;line-height:1.3;letter-spacing:-.01em}
.ok-sec__en{font-family:var(--ok-en);font-size:var(--ok-fs-lead);font-weight:600;letter-spacing:.2em;color:var(--ok-accent-ink)}
.ok-sec--urgent .ok-sec__en{color:var(--ok-accent-ink)}
.ok-sec--urgent .ok-sec__head h2{color:var(--ok-accent-ink)}
.ok-sec__more{font-size:var(--ok-fs-mini);font-weight:700;white-space:nowrap;color:var(--ok-dim);text-decoration:none;padding-bottom:2px}
.ok-sec__more::after{content:" ›";margin-left:4px;font-size:1rem}
.ok-sec__more:hover{color:var(--ok-accent-ink)}

.ok-pagetitle{margin:24px 0 8px;font-size:var(--ok-fs-pagetitle);font-weight:800;line-height:1.35}
.ok-pagelead{margin:0 0 26px;font-size:var(--ok-fs-text);color:var(--ok-dim);line-height:var(--ok-lh-relaxed)}

/* ============================ 番組表 ============================ */
.ok-day{margin-bottom:20px}
.ok-day__head{
  display:flex;align-items:flex-end;gap:8px;margin:0;padding-bottom:8px;
  border-bottom:2px solid var(--ok-ink);
}
/* 数字は黒のまま。赤は CTA・緊急・放送タグで既に使っているため、
   ここまで赤くすると画面が騒がしくなり可読性が落ちる。
   土日の色分けは曜日の1文字だけに留める（日本の時刻表も同じ扱い）。 */
.ok-day__num{font-family:var(--ok-en);font-size:var(--ok-fs-day);font-weight:600;line-height:1;letter-spacing:.01em;color:var(--ok-ink)}
.ok-day__dow{
  font-size:var(--ok-fs-mini);font-weight:700;color:var(--ok-dim);
  padding:1px 5px;background:var(--ok-wash);
}
.ok-day.is-sat .ok-day__dow{color:var(--ok-blue);background:#eaf1fb}
.ok-day.is-sun .ok-day__dow{color:var(--ok-accent-ink);background:var(--ok-accent-bg)}
.ok-day__rel{margin-left:auto;padding:3px 8px;background:var(--ok-ink);color:#fff;font-size:var(--ok-fs-eyebrow);font-weight:700;letter-spacing:.06em}

.ok-slots{list-style:none;margin:0;padding:0}
.ok-slot{border-bottom:1px solid var(--ok-rule)}
.ok-slot__link{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:15px 0;color:inherit;text-decoration:none}
.ok-slot__link:hover .ok-slot__title{color:var(--ok-accent-ink)}
.ok-slot__time{
  font-family:var(--ok-en);font-size:var(--ok-fs-rowtime);font-weight:600;line-height:1.45;
  padding:2px 0 0 10px;border-left:3px solid var(--ok-rule);
}
.ok-slot--ppv .ok-slot__time,.ok-slot--subscription .ok-slot__time{border-left-color:var(--ok-teal)}
.ok-slot--broadcast .ok-slot__time{border-left-color:var(--ok-accent)}
.ok-slot__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ok-slot__title{font-size:var(--ok-fs-row);font-weight:700;line-height:1.5}
.ok-slot__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--ok-fs-small);color:var(--ok-dim)}
.ok-slot__price{font-family:var(--ok-en);font-size:var(--ok-fs-fact);font-weight:600;color:var(--ok-ink)}
.ok-slot__price small{font-family:var(--ok-jp);font-size:var(--ok-fs-micro);font-weight:400;margin-left:3px}
.ok-slot__venue{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:13em}
.ok-slot__deadline{font-size:var(--ok-fs-tiny);font-weight:700;color:var(--ok-accent-ink)}

.ok-sched--urgent .ok-day__head{border-bottom-color:var(--ok-accent)}
.ok-sched--urgent .ok-slot{background:var(--ok-accent-bg)}
.ok-sched--urgent .ok-slot__link{padding-left:10px;padding-right:10px}
.ok-sched--urgent .ok-cta{margin:0;padding:0 10px 12px}

/* ============================ タグ ============================ */
.ok-tag{
  display:inline-block;padding:1px 6px;
  font-size:var(--ok-fs-eyebrow);font-weight:700;line-height:1.7;letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.ok-tag--ppv,.ok-tag--subscription{background:var(--ok-teal-bg);color:var(--ok-teal)}
.ok-tag--broadcast{background:var(--ok-accent-bg);color:var(--ok-accent-ink)}

/* ============================ CTA ============================ */
.ok-cta{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.ok-cta__btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--ok-cta-h);padding:13px 20px;
  background:var(--ok-action);color:#fff;border-radius:var(--ok-radius);
  font-size:var(--ok-fs-cta);font-weight:800;line-height:1.4;text-align:center;text-decoration:none;
  transition:background-color .18s;
}
.ok-cta__btn:hover,.ok-cta__btn:focus-visible{background:var(--ok-action-hover);color:#fff}
.ok-cta__lead{margin:0;font-size:var(--ok-fs-small);font-weight:700;color:var(--ok-ink);text-align:center;line-height:1.5}
.ok-cta__lead:empty{display:none}
.ok-cta__note{margin:0;font-size:var(--ok-fs-tiny);color:var(--ok-dim);text-align:center;line-height:var(--ok-lh-snug)}
.ok-cta__note:empty{display:none}
.ok-cta.is-expired .ok-cta__btn{background:var(--ok-dim)}

.ok-cta--archive_closing,.ok-cta--service_card{margin:0}
.ok-svc .ok-cta--service_card{margin-top:auto}
.ok-cta--archive_closing .ok-cta__btn,.ok-cta--service_card .ok-cta__btn{min-height:44px;padding:10px 16px;font-size:var(--ok-fs-fact)}

/* ============================ 追従バー ============================ */
.ok-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:2px solid var(--ok-ink);
  transform:translateY(110%);transition:transform .25s ease;
}
.ok-sticky.is-visible{transform:translateY(0)}
.ok-sticky__inner{max-width:640px;margin:0 auto}
.ok-sticky .ok-cta{margin:0;gap:2px}
.ok-sticky .ok-cta__btn{min-height:46px;font-size:var(--ok-fs-lead)}
.ok-sticky .ok-cta__note{font-size:var(--ok-fs-label)}

/* ============================ 配信サービス ============================ */
/* 並列の選択肢を横に比較させる場面なので、ここはカードが正しい形。
   影と角丸は使わず、上端の色と罫線だけで作る。 */
.ok-svcs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:20px}
.ok-svc{
  display:flex;flex-direction:column;gap:10px;padding:14px;
  background:var(--ok-paper);border:1px solid var(--ok-rule);border-top:3px solid var(--ok-ink);
}
.ok-svc--ppv,.ok-svc--subscription{border-top-color:var(--ok-teal)}
.ok-svc--broadcast{border-top-color:var(--ok-accent)}
.ok-svc__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ok-svc__name{margin:0;padding:6px 0;font-size:var(--ok-fs-lead);font-weight:800;line-height:1.4}
.ok-svc__name a{color:inherit;text-decoration:none}
.ok-svc__name a:hover{color:var(--ok-accent-ink)}
.ok-svc__facts{margin:0;display:flex;flex-direction:column}
.ok-svc__facts > div{
  /* 項目名の最長は「ライブごとの料金」（8文字・11px）。折り返さない幅を取る。 */
  display:grid;grid-template-columns:8em 1fr;gap:8px;
  padding:10px 0;border-bottom:1px solid var(--ok-rule);font-size:var(--ok-fs-small);line-height:var(--ok-lh-snug);
}
.ok-svc__facts > div:first-child{border-top:1px solid var(--ok-rule)}
.ok-svc__facts dt{color:var(--ok-dim);font-weight:700;font-size:var(--ok-fs-label)}
.ok-svc__facts dd{margin:0;font-variant-numeric:tabular-nums}
.ok-svc__facts .is-empty{color:#c3cad2}

/* ============================ アーティスト ============================ */
.ok-artists{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--ok-ink)}
.ok-artists li{border-bottom:1px solid var(--ok-rule)}
.ok-artists li:nth-child(odd){border-right:1px solid var(--ok-rule)}
.ok-artists a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px 10px 12px;font-size:var(--ok-fs-text);font-weight:700;color:inherit;text-decoration:none}
.ok-artists a:hover{color:var(--ok-accent-ink)}
.ok-artists__count{font-family:var(--ok-en);font-size:var(--ok-fs-label);font-weight:400;color:var(--ok-dim)}
.ok-artists--index li:nth-child(odd){border-right:1px solid var(--ok-rule)}

/* ============================ 新着記事 ============================ */
.ok-feed{display:grid;gap:20px}
.ok-feed__lead a{display:flex;flex-direction:column;gap:9px;color:inherit;text-decoration:none}
.ok-feed__lead img,.ok-ph{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--ok-wash)}
.ok-ph{display:grid;place-items:center;font-family:var(--ok-en);font-size:var(--ok-fs-mini);letter-spacing:.2em;color:#c7ced6}
.ok-feed__lead h3{margin:0;font-size:var(--ok-fs-h3);font-weight:800;line-height:1.5}
.ok-feed__lead a:hover h3{color:var(--ok-accent-ink)}

.ok-feed__rest{list-style:none;margin:0;padding:0;border-top:1px solid var(--ok-rule)}
.ok-feed__rest li{border-bottom:1px solid var(--ok-rule)}
.ok-feed__rest a{display:grid;grid-template-columns:68px 1fr;gap:11px;align-items:center;padding:10px 0;color:inherit;text-decoration:none}
.ok-feed__rest img,.ok-ph--sm{width:68px;height:44px;object-fit:cover;display:block;background:var(--ok-wash);aspect-ratio:auto}
.ok-feed__rest span{font-size:var(--ok-fs-text);font-weight:700;line-height:1.55}
.ok-feed__rest a:hover span{color:var(--ok-accent-ink)}

/* ============================ フッター ============================ */
.ok-footer{margin-top:52px;background:var(--ok-ink);color:#e6e9ec}
.ok-footer__inner{display:grid;gap:26px;padding:34px 0}
.ok-logo--footer{color:#fff}
.ok-footer__desc{margin:10px 0 0;font-size:var(--ok-fs-mini);color:#9aa3ad;line-height:var(--ok-lh-text)}
.ok-footer__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.ok-footer__nav .ok-footer__title{margin:0 0 9px;font-family:var(--ok-en);font-size:var(--ok-fs-text);font-weight:800;letter-spacing:.18em;color:var(--ok-accent-ink)}
.ok-footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ok-footer__nav a{font-size:var(--ok-fs-small);color:#d6dbe0;text-decoration:none}
.ok-footer__nav a:hover{color:#fff;text-decoration:underline}
.ok-footer__legal{border-top:1px solid #2a3038;padding:14px 0 24px}
.ok-footer__legal p{margin:0;font-size:var(--ok-fs-label);color:#8d959e;line-height:var(--ok-lh-text)}
.ok-footer__copy{margin-top:6px!important;font-family:var(--ok-en);letter-spacing:.06em}

/* ============================ 内部ナビボタン ============================ */
.wp-block-button.ok-btn-nav .wp-block-button__link{
  display:inline-block;padding:11px 22px;background:#fff;color:var(--ok-ink);
  border:2px solid var(--ok-ink);border-radius:var(--ok-radius);font-weight:700;font-size:var(--ok-fs-lead);text-decoration:none;
}
.wp-block-button.ok-btn-nav .wp-block-button__link:hover{background:var(--ok-ink);color:#fff}

/* ============================ 画面幅 ============================ */
@media (min-width:700px){
  .ok-hero{margin-inline:auto;width:auto;display:grid;grid-template-columns:1.3fr 1fr;align-items:stretch}
  .ok-hero__stage{display:flex}
  .ok-hero__media{flex:1;display:flex}
  .ok-hero__media img{width:100%;height:100%;aspect-ratio:auto;min-height:340px}
  .ok-hero__panel{background:var(--ok-ink);color:#fff;padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
  .ok-hero__facts > div{border-color:#2a3038}
  .ok-hero__facts > div:first-child{border-top-color:#2a3038}
  .ok-hero__facts dt{color:#9aa3ad}
  .ok-slot__link{grid-template-columns:60px 1fr}
  .ok-svcs{grid-template-columns:repeat(2,1fr)}
  .ok-artists{grid-template-columns:repeat(3,1fr)}
  .ok-artists li:nth-child(odd){border-right:0}
  .ok-artists li:not(:nth-child(3n)){border-right:1px solid var(--ok-rule)}
  .ok-feed{grid-template-columns:1fr 1fr;gap:28px}
  .ok-footer__inner{grid-template-columns:1fr 1.2fr;gap:44px}
}
@media (min-width:1000px){
  .ok-svcs{grid-template-columns:repeat(3,1fr)}
  .ok-artists{grid-template-columns:repeat(4,1fr)}
  .ok-artists li:not(:nth-child(3n)){border-right:0}
  .ok-artists li:not(:nth-child(4n)){border-right:1px solid var(--ok-rule)}
  .ok-sticky{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ok-sticky,.ok-cta__btn{transition:none}
}

/* ============================ 一覧ページの導入部 ============================ */
.ok-lede{margin:26px 0 34px;padding-bottom:20px;border-bottom:2px solid var(--ok-ink)}
.ok-lede__en{margin:0 0 2px;font-family:var(--ok-en);font-size:var(--ok-fs-lead);font-weight:600;letter-spacing:.2em;color:var(--ok-accent-ink)}
.ok-lede__title{margin:0 0 10px -2px;font-size:var(--ok-fs-lede);font-weight:800;line-height:1.3;letter-spacing:-.015em;text-wrap:balance}
.ok-lede__text{margin:0;font-size:var(--ok-fs-text);color:var(--ok-ink-2);line-height:var(--ok-lh-body);max-width:46em}

.ok-stats{display:flex;flex-wrap:wrap;gap:8px 28px;margin:16px 0 0}
.ok-stats > div{display:flex;flex-direction:column;gap:1px}
.ok-stats dt{font-size:var(--ok-fs-label);font-weight:700;color:var(--ok-dim);letter-spacing:.04em}
.ok-stats dd{margin:0;font-family:var(--ok-en);font-size:var(--ok-fs-stat);font-weight:600;line-height:1.1}
.ok-stats dd small{font-family:var(--ok-jp);font-size:var(--ok-fs-mini);font-weight:400;color:var(--ok-dim);margin-left:3px}

.ok-sec__note{margin:-6px 0 20px;font-size:var(--ok-fs-text);color:var(--ok-dim);line-height:var(--ok-lh-relaxed)}

/* ============================ 比較表 ============================ */
.ok-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:10px}
.ok-table{width:100%;min-width:720px;border-collapse:collapse;font-size:var(--ok-fs-compact)}
.ok-table thead th{
  padding:9px 12px;text-align:left;white-space:nowrap;
  font-family:var(--ok-en);font-size:var(--ok-fs-label);font-weight:600;letter-spacing:.14em;
  color:var(--ok-dim);border-bottom:2px solid var(--ok-ink);
}
.ok-table tbody th,.ok-table tbody td{padding:13px 12px;border-bottom:1px solid var(--ok-rule);vertical-align:middle;text-align:left}
.ok-table tbody th{font-weight:800;font-size:var(--ok-fs-fact);min-width:13em}
.ok-table tbody th a{color:inherit;text-decoration:none}
.ok-table tbody th a:hover{color:var(--ok-accent-ink)}
.ok-table tbody tr:hover{background:var(--ok-wash)}
.ok-td-num{font-family:var(--ok-en);font-size:var(--ok-fs-lead);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ok-table .is-empty{color:#c3cad2}
.ok-td-cta{width:180px}
.ok-td-cta .ok-cta{margin:0}
.ok-td-cta .ok-cta__btn{min-height:40px;padding:8px 12px;font-size:var(--ok-fs-compact)}
.ok-td-cta .ok-cta__note{display:none}

/* ============================ 記事リスト（全幅） ============================ */
.ok-feed__rest--full{border-top:2px solid var(--ok-ink)}
.ok-feed__rest--full a{padding:12px 0}

@media (min-width:700px){
  .ok-feed__rest--full{columns:2;column-gap:32px}
  .ok-feed__rest--full li{break-inside:avoid}
}

/* ============================ 記事ページ（型A / 型B） ============================ */
.ok-crumb{margin:0 0 14px;font-size:var(--ok-fs-tiny);color:var(--ok-dim)}
.ok-crumb ol{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0;padding:0;list-style:none}
.ok-crumb li+li::before{content:"›";margin-right:6px;color:var(--ok-rule)}
.ok-crumb a{color:var(--ok-dim);text-decoration:none}
.ok-crumb a:hover{color:var(--ok-accent-ink);text-decoration:underline}

.ok-entry__head{margin:0 0 16px}
.ok-entry__title{margin:0;font-size:var(--ok-fs-h1);font-weight:800;line-height:1.42;letter-spacing:-.015em;text-wrap:balance}
.ok-entry__ad{margin:9px 0 0;font-size:var(--ok-fs-label);color:var(--ok-dim)}
.ok-entry__thumb{margin:0 0 20px;line-height:0}
.ok-entry__thumb img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

/* 結論。ファーストビューに答えとCTAを置く */
.ok-answer{margin:0 0 var(--ok-space-block);padding:var(--ok-pad-answer);background:var(--ok-wash);border-top:3px solid var(--ok-ink)}
.ok-answer__lead{margin:0 0 14px;font-size:var(--ok-fs-lead);line-height:1.75}
.ok-answer__lead strong{font-weight:800}
.ok-answer__specs{display:flex;flex-wrap:wrap;gap:6px 34px;margin:0 0 14px}
.ok-answer__specs > div{display:flex;flex-direction:column;gap:1px}
.ok-answer__specs dt{font-size:var(--ok-fs-label);font-weight:700;color:var(--ok-dim)}
.ok-answer__specs dd{margin:0;font-size:var(--ok-fs-lead);font-weight:700}
.ok-answer__specs .ok-fig{font-size:var(--ok-fs-fig)}
.ok-answer .ok-cta{margin:0}

/* 公演の事実一覧 */
.ok-facts{margin:0 0 var(--ok-space-block);display:flex;flex-direction:column;border-top:1px solid var(--ok-rule)}
.ok-facts > div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:9px 2px;border-bottom:1px solid var(--ok-rule)}
.ok-facts dt{font-size:var(--ok-fs-tiny);font-weight:700;color:var(--ok-dim)}
.ok-facts dd{margin:0;font-size:var(--ok-fs-fact);line-height:var(--ok-lh-snug);font-variant-numeric:tabular-nums}

/* 目次 */
.ok-toc{margin:var(--ok-space-block) 0;padding:var(--ok-pad-box) 18px;background:var(--ok-wash);border-left:3px solid var(--ok-ink)}
.ok-toc__title{margin:0 0 9px;font-family:var(--ok-en);font-size:var(--ok-fs-label);font-weight:600;letter-spacing:.2em;color:var(--ok-dim)}
.ok-toc ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:7px}
.ok-toc li{font-size:var(--ok-fs-text);line-height:var(--ok-lh-snug)}
.ok-toc a{color:var(--ok-ink);text-decoration:none}
.ok-toc a:hover{color:var(--ok-accent-ink);text-decoration:underline}

/* 本文の見出し */
.entry-content .ok-h2{
  margin:var(--ok-space-h2) 0 16px;padding:0 0 8px;font-size:var(--ok-fs-h2);font-weight:800;line-height:1.45;
  border-bottom:2px solid var(--ok-ink);scroll-margin-top:16px;
}
.entry-content .ok-h3{margin:var(--ok-space-h3) 0 10px;font-size:var(--ok-fs-h3);font-weight:800;line-height:1.5}

/* 手順 */
.ok-steps{list-style:none;margin:0;padding:0;counter-reset:okstep}
.ok-steps__item{position:relative;padding:0 0 22px 40px;border-left:2px solid var(--ok-rule);margin-left:13px}
.ok-steps__item:last-child{border-left-color:transparent;padding-bottom:4px}
.ok-steps__item::before{
  counter-increment:okstep;content:counter(okstep);
  position:absolute;left:-14px;top:0;width:26px;height:26px;
  display:grid;place-items:center;background:var(--ok-ink);color:#fff;
  font-family:var(--ok-en);font-size:var(--ok-fs-compact);font-weight:600;
}
.ok-steps__head{margin:0 0 6px;font-size:var(--ok-fs-lead);font-weight:800;line-height:1.5}
.ok-steps__body{margin:0;font-size:var(--ok-fs-text);line-height:var(--ok-lh-text);color:var(--ok-ink-2)}
/* 手順が1件だけの再生方法。番号を出さないので、本文と同じ体裁で置く。 */
.ok-steps__solo{margin:0 0 4px;font-size:var(--ok-fs-text);line-height:var(--ok-lh-text);color:var(--ok-ink-2)}
.ok-steps__fig{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  width:fit-content;max-width:100%;margin:.9rem 0 0;padding:.75rem .9rem 1rem;
  background:var(--ok-wash);border:1px solid var(--ok-rule);border-radius:12px;line-height:1.4;
}
.ok-steps__cap{align-self:flex-start;font-size:var(--ok-fs-mini);font-weight:700;letter-spacing:.04em;color:var(--ok-dim)}
.ok-steps__cap::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.4rem;border-radius:50%;background:var(--ok-accent-ink);vertical-align:.1em}
.ok-steps__fig img{display:block;width:100%;max-width:300px;height:auto;border-radius:8px;border:1px solid #dfe3e8;background:#fff;box-shadow:0 6px 18px rgba(17,20,23,.1)}
.ok-next-links{margin:2rem 0 1rem}

/* 注意点 */
.ok-caveats{list-style:none;margin:16px 0;padding:14px 16px;background:var(--ok-accent-bg);border-left:3px solid var(--ok-accent);display:flex;flex-direction:column;gap:8px}
.ok-caveats li{font-size:var(--ok-fs-text);line-height:var(--ok-lh-relaxed);padding-left:1.1em;position:relative}
.ok-caveats li::before{content:"!";position:absolute;left:0;font-family:var(--ok-en);font-weight:600;color:var(--ok-accent-ink)}

/* FAQ */
.ok-faq{margin:16px 0;border-top:1px solid var(--ok-rule)}
.ok-faq dt{
  padding:13px 0 6px 30px;position:relative;font-size:var(--ok-fs-q);font-weight:800;line-height:var(--ok-lh-snug);
}
.ok-faq dt::before{content:"Q";position:absolute;left:0;top:12px;font-family:var(--ok-en);font-weight:600;color:var(--ok-accent-ink);font-size:var(--ok-fs-body)}
.ok-faq dd{
  margin:0;padding:0 0 14px 30px;position:relative;border-bottom:1px solid var(--ok-rule);
  font-size:var(--ok-fs-text);line-height:var(--ok-lh-text);color:var(--ok-ink-2);
}
.ok-faq dd::before{content:"A";position:absolute;left:0;top:0;font-family:var(--ok-en);font-weight:600;color:var(--ok-dim);font-size:var(--ok-fs-body)}

/* まとめ */
.ok-summary{margin:14px 0 0;padding:14px 16px 14px 34px;background:var(--ok-wash);border-left:3px solid var(--ok-ink)}
.ok-summary li{font-size:var(--ok-fs-text);line-height:var(--ok-lh-text)}

.ok-apps{margin:12px 0;font-size:var(--ok-fs-small);color:var(--ok-dim)}
.ok-svcs--inline{margin:14px 0 18px}
.ok-crosslink{margin:22px 0;font-size:var(--ok-fs-fact);font-weight:700}
.ok-entry__related{margin-top:40px}

@media (min-width:700px){
  .ok-svcs--inline{grid-template-columns:repeat(2,1fr)}
}

/* ── 旧記事の部品を自前で持つ ───────────────────────────
 * SANGO の CSS を落とすため、記事本文に残るクラスをこちら側で定義する。
 * .linkto は関連記事カード。sgb/kanren の出力と同じマークアップなので、
 * そちらを変換するときにもこの定義を使う。
 * 影は使わず、テーマの他の面（枠線＋余白）に合わせる。
 */
.linkto{
  display:flex;align-items:center;gap:12px;
  max-width:550px;margin:18px 0;padding:10px;
  border:1px solid var(--ok-rule);background:var(--ok-paper);
  color:var(--ok-ink);text-decoration:none;
}
.linkto:hover,.linkto:focus-visible{background:var(--ok-wash)}
.linkto .tbcell{display:block;min-width:0}
.linkto .tbimg{flex:none;width:84px}
.linkto .tbimg img{display:block;width:100%;height:auto}
.linkto .tbtext{font-size:var(--ok-fs-fact);line-height:1.55;font-weight:700}

/* コンテンツブロックにあった横スライダーの置き換え。
 * スライダーは JavaScript が要るため、素直に折り返す並びにした。 */
.ok-linkrow{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}
.ok-linkrow figure{margin:0;flex:0 1 140px;text-align:center}
.ok-linkrow img{display:block;width:100%;height:auto}
.ok-linkrow figcaption{font-size:var(--ok-fs-mini);margin-top:4px}

/* 記事一覧（旧 sgb/posts の置き換え）。カードを並べるだけで、スライダーにはしない。 */
.ok-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:18px 0}
.ok-cardgrid .linkto{max-width:none;margin:0}
.ok-cardgrid .tbtext{font-size:var(--ok-fs-compact)}

/* 費用の3行（月額・公演ごと・始め方）の補足 */
.ok-answer__specs dd.ok-answer__sub{font-size:var(--ok-fs-tiny);font-weight:400;color:var(--ok-dim)}
.ok-answer__note{margin:0 0 14px;font-size:var(--ok-fs-compact);line-height:var(--ok-lh-snug);color:var(--ok-ink-2)}
.ok-svc__note{margin:8px 0 0;flex:1;font-size:var(--ok-fs-mini);line-height:1.55;color:var(--ok-ink-2)}

/* 月額に添える「基本料込み」。値より一段小さく、同じ行に収める。 */
.ok-fee-tag{font-size:.86em;font-weight:400;color:var(--ok-ink-2);white-space:nowrap}

/* 始める前に用意するもの（サービスマスタの requirements） */
.ok-needs{margin:0 0 22px;padding:14px 16px 12px;border:1px solid var(--ok-rule)}
.ok-needs__title{margin:0 0 8px;font-size:var(--ok-fs-fact);font-weight:800;line-height:1.5}
.ok-needs__list{margin:0;padding:0 0 0 1.2em;font-size:var(--ok-fs-text);line-height:var(--ok-lh-relaxed)}
.ok-needs__list li+li{margin-top:4px}
.ok-needs__list small{display:block;font-size:var(--ok-fs-mini);line-height:var(--ok-lh-snug);color:var(--ok-dim)}

/* 情報の確認日と出典（sources / verified_at） */
.ok-source{margin:10px 0 0;font-size:var(--ok-fs-tiny);line-height:var(--ok-lh-snug);color:var(--ok-dim)}
.ok-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 公演を探す入口と、通常リンクによるページ送り。 */
.ok-discovery-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.5rem}
.ok-discovery-nav a,.ok-pagination a,.ok-pagination .current{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem .85rem;border:1px solid var(--ok-rule);border-radius:var(--ok-radius);font-size:var(--ok-fs-text);text-decoration:none}
.ok-discovery-nav a:hover,.ok-pagination .current{background:var(--ok-ink);color:#fff}
.ok-pagination ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0}
.ok-sec[id]{scroll-margin-top:1rem}
.ok-instructions[id]{scroll-margin-top:1rem}
.ok-search-result{padding:1.2rem 0;border-bottom:1px solid var(--ok-rule)}
.ok-search-result h2{margin:.3rem 0;font-size:var(--ok-fs-h2);line-height:1.5}
.ok-search-result p{margin:.4rem 0}
.ok-search-result__kind,.ok-search-result__meta{font-size:var(--ok-fs-small);color:var(--ok-ink-sub)}
.ok-artist-status{display:block;font-size:var(--ok-fs-small);font-weight:400;color:var(--ok-ink-sub)}
.ok-tablehint{font-size:var(--ok-fs-small);color:var(--ok-ink-sub)}
.ok-answer .ok-facts{margin-bottom:1rem}
@media(max-width:699px){
  .ok-table thead th:first-child,.ok-table tbody th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--ok-ground);min-width:8em;max-width:10em;box-shadow:2px 0 3px #0001;overflow-wrap:anywhere}
  .ok-table thead th:first-child{color:var(--ok-ink)}
  .ok-cta__note{font-size:var(--ok-fs-small)}
}

.ok-discovery-nav a{color:var(--ok-ink);font-weight:700}
.ok-discovery-nav a:hover{color:#fff}
.ok-svcs{grid-template-columns:minmax(0,1fr)}
.ok-svc,.ok-svc__facts dd{min-width:0;overflow-wrap:anywhere}
@media(min-width:700px){.ok-svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ok-svcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ok-tablewrap{contain:layout paint}
.ok-table .ok-tag{white-space:nowrap}

/* トップだけ外側を全幅にし、導入以外の幅は通常コンテナへ戻す。 */
.ok-has-home-intro .ok-main > .ok-container{width:100%}
.ok-has-home-intro .ok-main > .ok-container > :not(.ok-home-intro){width:min(100% - var(--ok-gutter) * 2,var(--ok-wrap));margin-inline:auto}
@media(max-width:699px){.ok-has-home-intro .ok-main > .ok-container > .ok-hero{width:100%;margin-inline:0}}
/* ペンライト背景と文字の幅を独立させる。 */
.ok-home-intro{
  --ok-intro-red:#e52220;
  position:relative;isolation:isolate;overflow:hidden;
  padding:0;
  margin:0 0 2rem;
  background:#fff5f4 url("../img/hero-penlights.webp") center right/cover no-repeat;
}
.ok-home-intro__inner{box-sizing:border-box;width:min(100% - var(--ok-gutter) * 2,var(--ok-wrap));margin-inline:auto;padding:clamp(2rem,5vw,4.5rem) clamp(1.25rem,4vw,3.5rem)}
.ok-home-intro__content{position:relative;z-index:1;max-width:80%}
.ok-home-intro__eyebrow{margin:0 0 1.3rem;color:var(--ok-intro-red);font-size:var(--ok-fs-small);font-weight:800;letter-spacing:.25em;line-height:1.5}
.ok-home-intro h1{margin:0 0 .8rem;font-size:clamp(1.75rem,3vw,2.75rem);font-weight:800;line-height:1.35;letter-spacing:-.035em;text-wrap:balance}
.ok-home-intro__description{margin:0;font-size:var(--ok-fs-text);line-height:1.8;color:var(--ok-ink-2)}
.ok-home-intro__nav{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.ok-home-intro__nav a{display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:52px;padding:.8rem 1.25rem;border:1px solid #949ba2;border-radius:var(--ok-radius);background:#ffffffc9;color:var(--ok-ink);font-size:var(--ok-fs-text);font-weight:700;text-decoration:none}
.ok-home-intro__nav a span{font-size:1.4em;font-weight:400;line-height:1}
.ok-home-intro__nav a:first-child{background:var(--ok-intro-red);border-color:var(--ok-intro-red);color:#fff}
.ok-home-intro__nav a:hover{background:#fff;border-color:var(--ok-intro-red);color:var(--ok-intro-red)}
.ok-home-intro__nav a:first-child:hover{background:var(--ok-action-hover);border-color:var(--ok-action-hover);color:#fff}
.ok-home-intro__nav a:focus-visible{outline:3px solid var(--ok-ink);outline-offset:4px}
.ok-home-intro__signature{margin:1.75rem 0 0;color:#939ba4;font-size:.625rem;font-weight:600;letter-spacing:.35em;line-height:1.8}
.ok-footer__nav .ok-footer__title,.ok-hero__eyebrow span{color:var(--ok-accent)}
@media(max-width:999px){
  .ok-home-intro__content{max-width:100%}
}
@media(max-width:699px){
  .ok-home-intro{margin-bottom:1.5rem;background-image:linear-gradient(90deg,#fff8f5ed,#fff8f5b3),url("../img/hero-penlights.webp")}
  .ok-home-intro__inner{padding:2rem 1.25rem}
  .ok-home-intro__eyebrow{font-size:.7rem;margin-bottom:1rem}
  .ok-home-intro__nav{gap:.6rem;margin-top:1.4rem}
  .ok-home-intro__nav a{width:100%;min-height:48px;padding:.7rem 1rem}
  .ok-home-intro__signature{font-size:.55rem;letter-spacing:.22em}
}
/* 種別はブランド色から独立：PPV=青、月額=緑、CS放送=アンバー。 */
:root{--ok-ppv:#2457a7;--ok-ppv-bg:#eef4fc;--ok-plan:#246b4b;--ok-plan-bg:#eef7f1;--ok-broadcast:#946200;--ok-broadcast-bg:#fff5df}
.ok-tag--ppv{color:var(--ok-ppv);background:var(--ok-ppv-bg)}
.ok-tag--subscription{color:var(--ok-plan);background:var(--ok-plan-bg)}
.ok-tag--broadcast{color:var(--ok-broadcast);background:var(--ok-broadcast-bg)}
.ok-svc--ppv{border-top-color:var(--ok-ppv)}
.ok-svc--subscription{border-top-color:var(--ok-plan)}
.ok-svc--broadcast{border-top-color:var(--ok-broadcast)}
.ok-slot--ppv .ok-slot__time{border-left-color:var(--ok-ppv)}
.ok-slot--subscription .ok-slot__time{border-left-color:var(--ok-plan)}
.ok-slot--broadcast .ok-slot__time{border-left-color:var(--ok-broadcast)}

/* トップは透明ヘッダーを導入背景に重ねる。共通コンテナで左右をそろえる。 */
.ok-has-home-intro .ok-header{position:absolute;inset:0 0 auto;z-index:5;background:transparent;border-bottom:0}
.ok-has-home-intro.admin-bar .ok-header{top:32px}
.ok-has-home-intro .ok-home-intro__inner{padding:calc(72px + clamp(2rem,5vw,4.5rem)) 0 clamp(2.5rem,5vw,4.5rem)}
.ok-has-home-intro .ok-search input{background:#ffffffb3}
@media(max-width:899px){
  .ok-has-home-intro .ok-home-intro__inner{padding-top:calc(112px + 2rem)}
}
@media(max-width:782px){.ok-has-home-intro.admin-bar .ok-header{top:46px}}
@media(max-width:699px){
  .ok-has-home-intro .ok-home-intro__inner{padding-inline:0;padding-bottom:2.5rem}
}

/* コンパクトな注目公演。ok-hero--compactを外せば従来表示へ戻せる。 */
.ok-hero.ok-hero--compact{background:var(--ok-paper);color:var(--ok-ink);border-block:1px solid var(--ok-rule);padding:1.5rem 0;gap:2rem;grid-template-columns:1.2fr 1fr}
.ok-hero--compact .ok-hero__stage{display:flex;align-items:center;gap:1.5rem;min-width:0}
.ok-hero--compact .ok-hero__media{flex:0 0 140px;align-self:center}
.ok-hero--compact .ok-hero__media img{width:140px;height:140px;min-height:0;aspect-ratio:1;object-fit:cover}
.ok-hero.ok-hero--compact .ok-hero__overlay{position:static;padding:0;background:none;color:var(--ok-ink);min-width:0}
.ok-hero--compact .ok-hero__eyebrow{color:var(--ok-accent-ink);font-size:var(--ok-fs-small)}
.ok-hero--compact .ok-hero__title{font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.45}
.ok-hero--compact .ok-hero__title a{color:var(--ok-ink)}
.ok-hero--compact .ok-hero__date{font-size:2rem}
.ok-hero--compact .ok-hero__panel{background:transparent;color:var(--ok-ink);padding:0;min-width:0}
.ok-hero--compact .ok-hero__facts{margin-bottom:1rem}
.ok-hero--compact .ok-hero__facts > div{border:0;padding:4px 0}
.ok-hero--compact .ok-hero__facts dt{color:var(--ok-dim)}
@media(max-width:699px){
  .ok-has-home-intro .ok-main > .ok-container > .ok-hero--compact{width:calc(100% - var(--ok-gutter) * 2);margin-inline:auto}
  .ok-hero.ok-hero--compact{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;padding-block:1.25rem}
  .ok-hero--compact .ok-hero__stage{gap:1rem}
  .ok-hero--compact .ok-hero__media{flex-basis:88px}
  .ok-hero--compact .ok-hero__media img{width:88px;height:88px}
}

/* 読者の判断に必要な補足は本文サイズ、料金・期限は濃い文字。 */
.ok-svc__note,.ok-source,.ok-answer__note,.ok-answer__specs dd.ok-answer__sub,.ok-cta__note,.ok-slot__deadline{font-size:var(--ok-fs-text)}
.ok-cta__note,.ok-slot__deadline,.ok-facts dd,.ok-svc__facts dd,.ok-answer__specs dd{color:var(--ok-ink)}
.ok-slot__deadline{font-weight:700}
.ok-sticky .ok-cta__note{font-size:var(--ok-fs-text)}
@media(min-width:700px){.ok-hero__panel .ok-cta__note{color:#fff}}
/* 索引はタイトル下の罫線を生かし、表の太い上線と縦線を省く。 */
.ok-artists--index{border-top:0;column-gap:1.5rem}
.ok-artists.ok-artists--index li{border-right:0}
.ok-artists--index a{padding-inline:0;min-height:52px}

/* サービス別公演：既存の種別色と番組表のタイポグラフィを共用する。 */
.ok-service-discovery{--ok-service-color:var(--ok-ppv);--ok-service-wash:var(--ok-ppv-bg);border:1px solid var(--ok-rule);border-top:3px solid var(--ok-service-color);padding:clamp(1rem,3vw,2rem);background:var(--ok-paper)}
.ok-service-discovery--broadcast{--ok-service-color:var(--ok-broadcast);--ok-service-wash:var(--ok-broadcast-bg)}
.ok-service-discovery--subscription{--ok-service-color:var(--ok-plan);--ok-service-wash:var(--ok-plan-bg)}
.ok-service-discovery__head{align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.ok-service-discovery__head h2{font-size:var(--ok-fs-h2)}
.ok-service-discovery__group{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:var(--ok-fs-h3);margin:1.5rem 0 0;padding-bottom:.6rem;border-bottom:1px solid var(--ok-ink)}
.ok-service-discovery__group > span{font-size:var(--ok-fs-small);font-weight:400;white-space:nowrap}
.ok-service-lives,.ok-article-links{list-style:none;margin:0;padding:0}
.ok-service-lives li,.ok-article-links li{border-bottom:1px solid var(--ok-rule)}
.ok-service-lives a{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 1.25rem;align-items:center;gap:1.25rem;padding:1rem .5rem;color:var(--ok-ink);text-decoration:none}
.ok-service-lives__date{display:flex;flex-direction:column;align-items:flex-start;border-left:3px solid var(--ok-service-color);padding-left:.75rem;line-height:1.5}
.ok-service-lives__date strong{font-family:var(--ok-en);font-size:var(--ok-fs-day);line-height:1.2}
.ok-service-lives__date small{font-size:var(--ok-fs-mini);color:var(--ok-ink-2)}
.ok-service-lives__title{font-size:var(--ok-fs-row);font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.ok-link-arrow{color:var(--ok-accent);font-size:1.1rem;font-weight:400}
.ok-service-lives a:hover{background:var(--ok-service-wash)}
.ok-service-lives a:hover .ok-service-lives__title,.ok-article-links a:hover .ok-article-links__title{text-decoration:underline;text-underline-offset:.2em}
.ok-service-guide{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:fit-content;max-width:100%;margin-top:1.5rem;min-height:48px;padding:.65rem 1rem;border:1px solid var(--ok-ink);font-size:var(--ok-fs-text);font-weight:700;color:var(--ok-ink);text-decoration:none;line-height:1.6}
.ok-service-guide:hover{background:var(--ok-ink);color:#fff}
/* 過去記事は写真を増やさず、掲載日・タイトル・矢印で読み進める方向を示す。 */
.ok-article-links{border-top:1px solid var(--ok-rule)}
.ok-article-links a{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 1.25rem;gap:1.25rem;align-items:center;min-height:64px;padding:1rem .5rem;color:var(--ok-ink);text-decoration:none;line-height:1.7}
.ok-article-links__date{font-size:var(--ok-fs-small);font-variant-numeric:tabular-nums;color:var(--ok-ink-2)}
.ok-article-links__title{font-size:var(--ok-fs-text);font-weight:700;overflow-wrap:anywhere}
.ok-article-links a:hover{background:var(--ok-wash)}
/* 空の区分も小さな案内として形をそろえる。 */
.ok-empty-summary{font-size:var(--ok-fs-text);color:var(--ok-ink-2);margin:1rem 0 1.5rem;padding:.9rem 1rem;border-left:2px solid var(--ok-rule);background:var(--ok-wash);scroll-margin-top:1rem}
.ok-artists--index a:hover{background:var(--ok-wash)}
.ok-artists--index .ok-artist-status{width:fit-content;margin-top:.3rem;padding:.1rem .4rem;background:var(--ok-accent-bg);color:var(--ok-ink-2);font-size:var(--ok-fs-mini)}
@media(max-width:699px){
  .ok-service-lives a{grid-template-columns:5rem minmax(0,1fr) 1rem;gap:.75rem;padding-inline:0}
  .ok-service-lives__title{font-size:var(--ok-fs-text)}
  .ok-service-guide{width:100%}
  .ok-article-links a{grid-template-columns:minmax(0,1fr) 1rem;gap:.3rem .75rem}
  .ok-article-links__date{grid-column:1;font-size:var(--ok-fs-mini)}
  .ok-article-links__title{grid-column:1}
  .ok-article-links .ok-link-arrow{grid-column:2;grid-row:1/span 2}
}

/* ボタンの角丸とページ送りはサイト共通。 */
.ok-service-guide{border-radius:var(--ok-radius)}
.ok-search input{border-radius:var(--ok-radius) 0 0 var(--ok-radius)}
.ok-search button{border-radius:0 var(--ok-radius) var(--ok-radius) 0}
.ok-post-archive__toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.ok-post-archive__count{margin:0;font-size:var(--ok-fs-text);color:var(--ok-ink-2)}
.ok-post-archive__count strong{font-family:var(--ok-en);font-size:var(--ok-fs-stat);color:var(--ok-ink);margin-right:.3rem}
.ok-post-archive__search{display:flex;width:min(100%,360px)}
.ok-post-archive__search input{min-width:0;flex:1;border:1px solid var(--ok-rule);border-radius:var(--ok-radius) 0 0 var(--ok-radius);padding:.6rem .8rem;font:inherit;font-size:var(--ok-fs-text);background:var(--ok-wash);color:var(--ok-ink)}
.ok-post-archive__search button{min-height:44px;padding:.6rem 1rem;background:var(--ok-ink);color:#fff;border:1px solid var(--ok-ink);border-radius:0 var(--ok-radius) var(--ok-radius) 0;font:inherit;font-size:var(--ok-fs-text);font-weight:700;cursor:pointer}
.ok-post-archive .ok-article-links{border-top:2px solid var(--ok-ink)}
.ok-post-archive .ok-article-links__title{margin:0;font-size:var(--ok-fs-h3);line-height:1.7}
.ok-post-archive .ok-article-links a{padding-block:1.2rem}
.navigation.pagination{margin:2rem 0}
.navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.navigation.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem .85rem;border:1px solid var(--ok-rule);border-radius:var(--ok-radius);font-size:var(--ok-fs-text);font-weight:700;color:var(--ok-ink);text-decoration:none}
.navigation.pagination .current,.navigation.pagination a:hover{background:var(--ok-ink);border-color:var(--ok-ink);color:#fff}
.navigation.pagination .dots{border:0;min-width:0;padding-inline:0}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ok-search-result h2 a{color:var(--ok-ink);text-decoration:none}
.ok-search-result h2 a:hover{color:var(--ok-accent-ink);text-decoration:underline}

/* Article guides: restrained borders, legible facts and the shared 5px radius. */
.ok-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:20px 0}
.ok-method{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:20px;background:#fff;border:1px solid var(--ok-line,#dce0e5);border-top:3px solid var(--ok-accent-ink);border-radius:var(--ok-radius);color:var(--ok-ink,#111417);text-decoration:none}
.ok-method strong{font-size:17px}.ok-method span:first-of-type{grid-column:1;font-size:15px;color:#505861}.ok-method span:last-child{grid-column:2;grid-row:1/3;align-self:center}
.ok-method:hover{background:#fff7f5;border-color:var(--ok-accent-ink)}
.ok-airings,.ok-offers{display:grid;gap:20px;margin:24px 0 32px;min-width:0}
.ok-airing,.ok-offer{padding:24px;border:1px solid var(--ok-line,#dce0e5);border-radius:var(--ok-radius);min-width:0;background:#fff}
.ok-offer{border-top:3px solid #2457a7}.ok-offer--subscription{border-top-color:#246b4b}.ok-offer--neutral{border-top-color:#656d76}
.ok-airing__head,.ok-offer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.entry-content .ok-airing h3,.entry-content .ok-offer h3{margin:0;font-size:19px;line-height:1.6}
.ok-airing__state{background:#f2f4f6;border-radius:var(--ok-radius);padding:3px 9px;font-size:13px;white-space:nowrap}
.entry-content .ok-airing__meta{color:#525961;font-size:15px;margin:12px 0 6px}
.entry-content .ok-airing__date{font-size:15px;color:#111417;font-weight:700;margin:6px 0}
.entry-content .ok-offer__price{font-size:22px;font-weight:700;line-height:1.6;margin:16px 0;color:#111417}
.ok-offer .ok-facts{margin:16px 0}.ok-offer .ok-cta{margin:24px 0 16px}
.ok-airing.is-ended{background:#f7f8f9}.ok-airing.is-ended .ok-airing__state{background:#e6e9ed}
.ok-editorial-notes{display:grid;gap:12px;margin:24px 0}
.ok-editorial-note{border-left:3px solid var(--ok-accent-ink);padding:14px 18px;background:#faf8f7}
.entry-content .ok-editorial-note h3{margin:0 0 8px;font-size:17px}.entry-content .ok-editorial-note p{margin:0;font-size:15px}
.ok-instructions{margin:24px 0 36px}.ok-instructions .ok-steps{margin:20px 0}
.ok-instructions h4{font-size:17px;margin:24px 0 12px}.ok-instructions h5{font-size:15px}
.entry-content .ok-billing-note{border-left:3px solid var(--ok-accent-ink);padding:14px 18px;background:#fff7f5;font-size:15px;color:#111417}
.ok-member-link{font-size:15px}.ok-entry .ok-service-guide{max-width:100%;box-sizing:border-box}
.ok-tag--neutral{background:#f2f4f6;color:#505861}
@media(max-width:599px){.ok-airing,.ok-offer{padding:18px 16px}.entry-content .ok-offer__price{font-size:20px}.ok-method{padding:16px}.ok-airing__date{overflow-wrap:anywhere}.ok-offer .ok-facts>div{grid-template-columns:1fr}.ok-offer .ok-facts dt{padding-bottom:4px}.ok-offer .ok-facts dd{padding-top:0}}

.ok-offer__coverage{margin:18px 0;border:1px solid var(--ok-rule);border-radius:5px;padding:12px 16px;font-size:15px}
.ok-offer__coverage summary{cursor:pointer;font-weight:700}
.ok-offer__coverage ul{margin:14px 0 0;padding-left:20px}

/* Top-page schedule: match the red direction marker used in article lists. */
.ok-slot__link--arrow{grid-template-columns:52px minmax(0,1fr) 20px}
.ok-slot__arrow{align-self:center;justify-self:end;color:var(--ok-accent-ink);font-size:22px;line-height:1}
@media (min-width:700px){.ok-slot__link--arrow{grid-template-columns:60px minmax(0,1fr) 20px}}

/* 日程・券種の表（2026-09-15）。カードを行の数だけ並べず、共通の情報は表の上か下に1回だけ出す。 */
.ok-airtable{margin:1.25rem 0 2rem}
.entry-content .ok-airtable__meta{margin:0 0 .6rem;font-size:var(--ok-fs-text);color:var(--ok-ink-2)}
.ok-airtable__table,.ok-offer-table{width:100%;border-collapse:collapse;font-size:var(--ok-fs-text);line-height:var(--ok-lh-snug)}
.ok-airtable__table thead th,.ok-offer-table thead th{padding:.5rem .6rem;text-align:left;font-size:var(--ok-fs-label);font-weight:700;color:var(--ok-dim);border-bottom:2px solid var(--ok-ink);white-space:nowrap}
.ok-airtable__table tbody th,.ok-airtable__table td,.ok-offer-table tbody th,.ok-offer-table td{padding:.8rem .6rem;border-bottom:1px solid var(--ok-rule);text-align:left;vertical-align:top}
.ok-airtable__table tbody th,.ok-offer-table tbody th{font-weight:700;overflow-wrap:anywhere}
.ok-airtable__table small,.ok-offer-table small{display:block;margin-top:.2rem;font-size:var(--ok-fs-mini);font-weight:400;color:var(--ok-ink-2)}
.ok-airtable__date{white-space:nowrap;font-variant-numeric:tabular-nums}
.ok-airtable__state{display:inline-block;padding:.1rem .5rem;border-radius:var(--ok-radius);background:#f2f4f6;font-size:var(--ok-fs-mini);white-space:nowrap}
.ok-airtable__state.is-available{background:var(--ok-accent-bg);color:var(--ok-ink)}
.ok-airtable__table tr.is-ended,.ok-offer-table tr.is-ended{color:var(--ok-ink-2)}
.ok-airtable__group summary,.ok-offer-table .ok-offer__coverage summary{cursor:pointer}
.ok-airtable__group ul{margin:.4rem 0 0;padding-left:1.1em;font-weight:400}
.ok-offer-table__price{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.ok-offer-table .ok-offer__coverage{margin:0;padding:0;border:0;font-size:inherit}
.ok-offer-table .ok-offer__coverage ul{margin:.4rem 0 0;padding-left:1.1em}
.ok-compare-offers{margin:1.25rem 0 2rem}
.entry-content .ok-compare-offers__label{margin:1.25rem 0 .4rem;font-size:var(--ok-fs-label);font-weight:700;color:var(--ok-dim)}
.ok-compare-offers .ok-facts{margin-bottom:1rem}
.ok-compare-offers .ok-cta{margin:1.5rem 0 1rem}
.entry-content .ok-answer__jump{margin:.8rem 0 0;font-size:var(--ok-fs-text)}
.ok-answer__jump a{color:var(--ok-ink);font-weight:700}
.ok-checklist{margin:1rem 0 1.5rem;padding:0;list-style:none;border-top:1px solid var(--ok-rule)}
.ok-checklist li{position:relative;padding:.7rem .2rem .7rem 1.9rem;border-bottom:1px solid var(--ok-rule);font-size:var(--ok-fs-text);line-height:var(--ok-lh-snug)}
.ok-checklist li::before{content:"";position:absolute;left:.25rem;top:.95rem;width:.9rem;height:.9rem;border:2px solid var(--ok-accent-ink);border-radius:3px}
@media (max-width:599px){
  /* スマホは横スクロールさせず、1行を縦に積む。 */
  .ok-airtable__table thead,.ok-offer-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ok-airtable__table,.ok-airtable__table tbody,.ok-offer-table,.ok-offer-table tbody{display:block;width:100%}
  .ok-airtable__table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .6rem;padding:.7rem 0;border-bottom:1px solid var(--ok-rule)}
  .ok-airtable__date{white-space:normal;overflow-wrap:anywhere}
  .ok-airtable__table tbody th{grid-column:1/-1}
  .ok-airtable__table tbody th,.ok-airtable__table td{padding:0;border:0}
  .ok-offer-table tr{display:block;padding:.8rem 0;border-bottom:1px solid var(--ok-rule)}
  .ok-offer-table tbody th,.ok-offer-table td{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:.6rem;padding:.2rem 0;border:0}
  .ok-offer-table tbody th{display:block;padding-bottom:.35rem;font-size:var(--ok-fs-fact)}
  .ok-offer-table td::before{content:attr(data-label);font-size:var(--ok-fs-mini);font-weight:700;color:var(--ok-dim);padding-top:.15rem}
  .ok-offer-table__price{white-space:normal}
}

/* 視聴方式の比較表（サービス解説）。行ラベルは控えめに、スマホは縦積み。 */
.ok-compare-access{margin:1.25rem 0 2rem}
.ok-compare-access .ok-offer-table thead th{white-space:normal}
.ok-compare-access .ok-offer-table tbody th{width:7.5em;color:var(--ok-dim);font-size:var(--ok-fs-label)}
.entry-content .ok-compare-access__note{margin:.8rem 0 0;font-size:var(--ok-fs-text);color:var(--ok-ink-2)}
@media (max-width:599px){
  /* 項目名を見出しにして、各方式の値はラベルを上に置いて1列で読ませる。 */
  .ok-compare-access .ok-offer-table tbody th{width:auto;font-size:var(--ok-fs-fact);font-weight:800;color:var(--ok-ink)}
  .ok-compare-access .ok-offer-table td{display:block}
  .ok-compare-access .ok-offer-table td::before{display:block;margin-bottom:.1rem}
  .ok-compare-access .ok-offer-table td+td{margin-top:.5rem}
}

/* 見放題で見られた公演の例（サービス解説）。事実の裏づけとして淡く囲む。 */
.entry-content .ok-plan-example{margin:1rem 0;padding:.8rem 1rem;background:var(--ok-wash);border-left:3px solid var(--ok-teal,#246b4b);font-size:var(--ok-fs-text);line-height:var(--ok-lh-text);color:var(--ok-ink)}