@charset "UTF-8";
/*
 * 基本スタイルとトークン
 *
 * テーマ情報（テーマ名など）は style.css に置く決まりなので、
 * スタイル本体はこのファイルに分けている。style.css は情報だけで、CSSは入っていない。
 *
 * ★文字サイズ・余白の調整はこのファイルで行う。
 *   全体   → 下の「文字サイズ・行間・余白」
 *   PCだけ → ファイル末尾「PCの調整（700px以上）」
 */

/* --------------------------------------------------------------
   トークン
   --sgb-main-color は SANGO 由来の変数名。既存記事のCSS（legacy.css）が
   この変数を参照しているため、名前を維持したまま新テーマ側で定義する。
   -------------------------------------------------------------- */
:root{
  --sgb-main-color:#44baed;
  --ok-main:#44baed;
  --ok-ink:#252525;
  --ok-ink-sub:#5f5f5f;
  --ok-ground:#ffffff;
  --ok-rule:#ececec;
  --ok-cta:#e8543f;
  --ok-radius:5px;

  /* --------------------------------------------------------------
     文字サイズ・行間・余白（ここを変えると全ページに効く）
     単位は rem（1rem = 読者の既定文字サイズ。通常16px）。コメントの px は16pxのときの実寸。
     PC（700px以上）だけ変えたいときは、このファイル末尾の
     「PCの調整」ブロックの同じ名前を書き換える。
     -------------------------------------------------------------- */

  /* 文字サイズ：大きいもの */
  --ok-fs-h1:1.55rem;             /* 記事タイトル（H1）／24.8px */
  --ok-fs-h2:1.25rem;             /* 本文の見出し（H2）／20px */
  --ok-fs-h3:1rem;                /* 本文の小見出し（H3）・カードの見出し／16px */
  --ok-fs-sec:1.7rem;             /* セクション見出し（配信スケジュールなど）／27.2px */
  --ok-fs-lede:1.6rem;            /* 一覧ページの大見出し／25.6px */
  --ok-fs-hero:1.6rem;            /* トップのヒーローの公演名／25.6px */
  --ok-fs-hero-num:2.1rem;        /* ヒーローの日付／33.6px */
  --ok-fs-pagetitle:1.5rem;       /* 検索結果などのページタイトル／24px */
  --ok-fs-day:1.7rem;             /* 番組表の日付／27.2px */
  --ok-fs-stat:1.6rem;            /* 一覧ページの件数／25.6px */
  --ok-fs-fig:1.5rem;             /* 料金の数字（月額など）／24px */
  --ok-fs-fig-sm:1.2rem;          /* 小さい数字（ヒーローの時刻・料金）／19.2px */
  --ok-fs-logo:1.45rem;           /* ロゴ／23.2px */

  /* 文字サイズ：本文まわり */
  --ok-fs-body:1rem;              /* 基準（body）／16px */
  --ok-fs-cta:1rem;               /* CTAボタン／16px */
  --ok-fs-rowtime:1rem;           /* 番組表の時刻／16px */
  --ok-fs-lead:0.94rem;           /* リード文・料金の答え・手順の見出し・一覧の公演名／15px */
  --ok-fs-row:1.12rem;            /* 番組表・一覧の公演名／17.9px */
  --ok-fs-q:0.9375rem;               /* よくある質問の質問／15px */
  --ok-fs-fact:0.9375rem;           /* 事実一覧の値・箱の見出し・リンクカード／15px */
  --ok-fs-text:0.9375rem;           /* 説明文（手順・FAQの回答・注意点・まとめ）／15px */
  --ok-fs-compact:0.81rem;        /* ナビ・比較表・一覧のリンク／13px */
  --ok-fs-small:0.9375rem;          /* 本文の補足／15px */
  --ok-fs-mini:0.75rem;           /* 12px */
  --ok-fs-tiny:0.72rem;           /* 補足・パンくず・出典／11.5px */
  --ok-fs-label:0.69rem;          /* 項目名（月額・始め方など）／11px */
  --ok-fs-eyebrow:0.66rem;        /* 欧文の小ラベル（ON AIR NEXT など）／10.6px */
  --ok-fs-micro:0.63rem;          /* 10.1px */

  /* 行間 */
  --ok-lh-body:1.9;         /* body */
  --ok-lh-text:1.85;        /* 説明文 */
  --ok-lh-relaxed:1.8;      /* 注意点・導入文 */
  --ok-lh-snug:1.6;         /* 表・補足 */

  /* 余白・幅 */
  --ok-gutter:16px;         /* 画面の左右の余白 */
  --ok-wrap:1100px;         /* 全体の最大幅 */
  --ok-measure:42em;        /* 本文1行の長さ（読みやすさの上限） */
  --ok-flow:1.4em;          /* 本文の段落間 */
  --ok-main-pad:1.5rem;           /* 本文エリアの上／24px */
  --ok-main-pad-bottom:4rem;      /* 本文エリアの下／64px */
  --ok-space-sec:3.4rem;          /* セクションの間／54.4px */
  --ok-space-block:1.6rem;        /* 箱（答え・目次・事実一覧）の下／25.6px */
  --ok-space-h2:2.5rem;           /* H2の上／40px */
  --ok-space-h3:1.6rem;           /* H3の上／25.6px */
  --ok-pad-box:1rem;              /* 箱の内側／16px */
  --ok-pad-answer:1rem;           /* ファーストビューの答えの内側／16px */
  --ok-cta-h:54px;          /* CTAボタンの高さ */
}

/* --------------------------------------------------------------
   SANGO の theme.json が出力していたCSS変数
   既存記事のCSS（legacy.css / sgb-compat.css）が参照しているため、
   新テーマ側で同じ値を定義する。これが無いと CTAボタンの角丸と影が消える。
   値の出典: orekoko.site の実測（2026-09-08）
   -------------------------------------------------------------- */
:root{
  --wp--custom--rounded--small:6px;
  --wp--custom--rounded--medium:12px;
  --wp--custom--shadow--small:0 2px 4px #4385bb12;
  --wp--custom--shadow--medium:0 6px 13px -3px rgba(0,12,66,.1), 0 0 1px rgba(0,30,100,.1);
  --wp--custom--shadow--medium-hover:0 12px 45px -9px rgb(0 0 0 / 23%);
  --wp--custom--shadow--large:0 16px 30px -7px rgba(0,12,66,.15);
  --wp--custom--shadow--solid:0 1px 2px 0 rgba(24,44,84,.1), 0 1px 3px 1px rgba(24,44,84,.1);
  --wp--custom--shadow--solid-hover:0 2px 4px 0 rgba(24,44,84,.1), 0 2px 8px 0 rgba(24,44,84,.1);
  --wp--custom--transition--default:.3s ease-in-out;
  --wp--custom--animation--header:fadeHeader 1s ease 0s 1 normal;
  --wp--custom--wrap--max-width:1180px;
  --wp--custom--wrap--content-width:1180px;
  --wp--custom--wrap--mobile--padding:16px;
  --wp--custom--widget--padding-vertical:6px;
  --wp--custom--widget--padding-horizontal:18px;
  --wp--custom--widget--icon-margin:6px;
  --wp--custom--footer--column-gap:40px;
  --wp--custom--toc--button--opacity:.6;
  --wp--preset--color--sango-main:#44baed;
  --wp--preset--color--sango-accent:#ffb36b;
  --wp--preset--color--sango-pastel:#b4e0fa;
  --wp--preset--font-family--dfont:"Quicksand","Helvetica","Arial","Hiragino Kaku Gothic ProN","Hiragino Sans",YuGothic,"Yu Gothic","メイリオ",Meiryo,sans-serif;
  --sgb-scroll-bar-width:0px;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--ok-ground);
  color:var(--ok-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:var(--ok-fs-body);
  line-height:var(--ok-lh-body);
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}
a{color:var(--ok-main)}

.ok-container{width:min(100% - var(--ok-gutter) * 2,var(--ok-wrap));margin-inline:auto}
.ok-main{padding:var(--ok-main-pad) 0 var(--ok-main-pad-bottom)}
.entry-content{max-width:var(--ok-measure)}
.entry-content > * + *{margin-top:var(--ok-flow)}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--ok-main);outline-offset:2px;
}

/* --------------------------------------------------------------
   PCの調整（700px以上）

   ★PCでの文字サイズ・余白を変えたいときは、この中の値だけを書き換える。
     ここに無い名前を追加すれば、その項目もPCだけ変えられる
     （名前の一覧はファイル上部のトークンを参照）。
   例）本文をPCだけ大きくする      → --ok-fs-text:0.95rem;
       セクションの間をPCだけ広げる → --ok-space-sec:3.5rem;
       全体の最大幅を狭める        → --ok-wrap:960px;

   単位の使い分け：文字サイズ・余白は rem（1rem = 読者のブラウザの既定文字サイズ。
   通常16px。既定を大きくしている人にも追従する）。画面の左右余白・全体の最大幅・
   ボタンの高さは px のまま（レイアウトの基準と押しやすさを固定するため）。
   -------------------------------------------------------------- */
@media (min-width:700px){
  :root{
    --ok-fs-h1:1.95rem;             /* 記事タイトル／31.2px */
    --ok-fs-h2:1.45rem;             /* 本文の見出し／23.2px */
    --ok-fs-lede:2rem;              /* 一覧ページの大見出し／32px */
    --ok-fs-hero:1.9rem;            /* ヒーローの公演名／30.4px */
    --ok-fs-hero-num:2.5rem;        /* ヒーローの日付／40px */
    --ok-pad-answer:1.25rem 1.4rem; /* ファーストビューの答えの内側／20×22px */
  }
}

/* さらに広い画面（1000px以上）だけ変えたいときは、ここに同じ形で書く。
@media (min-width:1000px){
  :root{
    --ok-fs-body:1.06rem;
    --ok-space-sec:3.5rem;
  }
}
*/