@charset "UTF-8";
/* =====================================================================
   douga-okiba.css — 動画の置き場（親テーマ kawasakigakusya・便 2・2026-10-15）
   見た目の正＝repo kawasaki-douga-okiba の mock/douga-okiba.css（commit 7515b4b・S の検収 GO）。
   0〜5 節はモックの規則をそのまま写した物（写した元の行の注記もモックのまま）。モック専用の 6 節（【仮】の印）は写さない。
   足した物は 3 つだけ＝2-g・2-h（判断席の筆入れ・便 2＝一覧の字の大きさの下限と 3 列のカードの公開日の行・2-f の隣）と
   末尾の 7 節（本物の埋め込み＝iframe を 16:9 の枠いっぱいに置く 1 規則）。

   使い方の決まり（モックから）
   - 親テーマの部品は class をそのまま使う＝ここには書かない。
       TOP の見出し … factsheet__header / factsheet__title / factsheet__subtitle / factsheet__divider（style.css）
       一覧・1 本の枠 … breadcrumb / page-header / page-header__title / page-header__subtitle（style.css）
   - ブログ（子テーマ kawasakigakusya-blog の assets/css/blog.css v2.0）の一覧・記事の部品は class 名をそのまま使い、
     規則を .douga-okiba の内側へ写す（blog.css は親ページで読まれないため）。
   - ブログは html の文字の大きさを幅で変え、rem で組んでいる。親ページの html は 16px のままなので、rem は var(--dk-rem) に置き換える。
   - 親ページの main は display:flex・align-items:center（index.css）。子は幅を指定しないと縮むので width:100% を置く。
   - img に width／height 属性は付けない（現行テーマの罠）。大きさはここで決める。
   - 読み込み＝TOP は parts/douga-latest.php が部品の直前に link を 1 本、一覧と 1 本は archive-douga.php／single-douga.php が wp_enqueue_style（head）。
   ===================================================================== */

/* ---------------------------------------------------------------
   0. 変数（blog.css L9〜L37 の :root を .douga-okiba の内側へ。名前は --dk- を頭に付けた）
   --------------------------------------------------------------- */
.douga-okiba {
  --dk-rem: max(9px, min(0.8333333333vw, 16px));
  --dk-primary: #d50d0d;        /* --clr-primary */
  --dk-primary-dark: #8b0808;   /* --clr-primary-dark */
  --dk-bg: #fbf8f3;             /* --clr-bg */
  --dk-text: #2a1f1f;           /* --clr-text */
  --dk-text-sub: #696970;       /* --clr-text-sub */
  --dk-imamura: #7d2a3a;        /* --clr-imamura（分類ラベルの既定色） */
  --dk-kadonosaka: #1f5036;     /* --clr-kadonosaka */
  --dk-info: #faca30;           /* --clr-info */
  --dk-shadow-card: calc(0.5 * var(--dk-rem)) calc(0.5 * var(--dk-rem)) calc(1.875 * var(--dk-rem)) 0 rgba(42, 31, 31, 0.12);
  --dk-shadow-sm: 0 0 calc(2 * var(--dk-rem)) rgba(0, 0, 0, 0.08);
  --dk-transit: all .4s ease-out;
}
@media (min-width: 48em) and (max-width: 67.5em) {
  .douga-okiba { --dk-rem: 14px; }
}
@media (max-width: 47.9375em) {
  .douga-okiba { --dk-rem: min(3.3816425121vw, 14px); }
}

/* ---------------------------------------------------------------
   1. 写した部品の土台（blog.css L41〜L95 の body・a・img・ul を部品の内側だけに当てる）
   --------------------------------------------------------------- */
.douga-okiba .post,
.douga-okiba .posts-more,
.douga-okiba .archive-pagination,
.douga-okiba .single-article {
  font-size: var(--dk-rem);   /* ブログの本文の大きさ＝1rem。字間（em）と行の高さはこの大きさから決まる */
  color: var(--dk-text);
  line-height: 2;
  letter-spacing: 0.08em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
.douga-okiba .post a,
.douga-okiba .posts-more a,
.douga-okiba .archive-pagination a,
.douga-okiba .single-article a {
  color: inherit;
  text-decoration: none;
  transition: var(--dk-transit);
}
.douga-okiba .post img,
.douga-okiba .single-article img {
  max-width: 100%;
  display: block;
}

/* ---------------------------------------------------------------
   2. カード（ブログ一覧のカード article.post.post-sub）
   --------------------------------------------------------------- */
/* blog.css L990・L3866・L4701 */
.douga-okiba .post-sub {
  border-radius: calc(2 * var(--dk-rem)) calc(0.5 * var(--dk-rem)) calc(1 * var(--dk-rem)) calc(0.5 * var(--dk-rem));
  box-shadow: var(--dk-shadow-card);
  overflow: hidden;
  background-color: #fff;
  transition: var(--dk-transit);
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* blog.css L998 */
.douga-okiba .post-sub:hover {
  box-shadow: var(--dk-shadow-sm);
  transform: translateY(calc(-0.2 * var(--dk-rem)));
}
/* blog.css L426・L431・L3871・L4701 */
.douga-okiba .post-sub .post--lnk {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.douga-okiba .post--lnk:hover { opacity: 1; }
/* blog.css L1003・L4703・L4705（一覧の枠は 16:9） */
.douga-okiba .post-sub--img {
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  background-color: #dadada;
  position: relative;
}
.douga-okiba .post-sub--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* blog.css L1010・L3876・L4706 */
.douga-okiba .post-sub--txtarea {
  padding: calc(0.875 * var(--dk-rem)) calc(1 * var(--dk-rem)) calc(1 * var(--dk-rem));
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* 分類ラベルと日付の行（blog.css L498・L3929・L3934） */
.douga-okiba .post--info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(0.5 * var(--dk-rem));
  margin-bottom: calc(0.875 * var(--dk-rem));
}
.douga-okiba .post--info .cat_list { display: inline-flex; }
/* blog.css L505（ラベルの既定色＝--clr-imamura） */
.douga-okiba .cat_list span {
  display: inline-block;
  min-width: calc(7 * var(--dk-rem));
  padding: calc(0.25 * var(--dk-rem)) 1em;
  font-size: calc(0.875 * var(--dk-rem));
  line-height: 1.375;
  color: #fff;
  border-radius: calc(0.9375 * var(--dk-rem));
  background-color: var(--dk-imamura);
  text-align: center;
  white-space: nowrap;
}
/* blog.css L524・L529・L539（番組と「新着」の色はブログの既存の分類色から選ぶ）
   番組 川崎学舎 → .cat-imamura（ワイン）／番組 ゴンドラにゆられて → .cat-kadonosaka（深緑）／新着 → .cat-info（金）
   ブログは !important で上の .cat_list span の地色に勝たせている。ここでは .cat_list を前に足して勝たせる。 */
.douga-okiba .cat_list .cat-imamura { background-color: var(--dk-imamura); color: #fff; }
.douga-okiba .cat_list .cat-kadonosaka { background-color: var(--dk-kadonosaka); color: #fff; }
.douga-okiba .cat_list .cat-info { background-color: var(--dk-info); color: var(--dk-text); }
/* 「新着」は 2 文字なので最小幅を外す（ブログが狭いカードで使う値 blog.css L1094・L1204 の min-width:unset）。
   これが無いと一覧の 3 列（1280 幅でカード 242px）で「新着＋番組＋公開日」が 1 行に入らず、公開日が次の行へ落ちる。 */
.douga-okiba .cat_list .cat-info { min-width: unset; }

/* 公開日（blog.css L3908・L3917） */
.douga-okiba .post-date-inline {
  font-family: "Outfit", sans-serif;
  font-size: calc(0.8125 * var(--dk-rem));
  font-weight: 500;
  color: var(--dk-text-sub);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
}
.douga-okiba .post-date-inline::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.7em;
  background: rgba(42, 31, 31, 0.25);
  margin-right: calc(0.55 * var(--dk-rem));
  margin-left: calc(0.5 * var(--dk-rem));
  flex-shrink: 0;
}

/* 題（blog.css L545 → カードは L1014・L3881・L4707 で 2 行まで） */
.douga-okiba .post--ttl {
  font-size: calc(1.25 * var(--dk-rem));
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.05em;
  margin: 0 0 calc(0.75 * var(--dk-rem));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.douga-okiba .post-sub--txtarea .post--ttl {
  font-size: calc(1.0625 * var(--dk-rem));
  -webkit-line-clamp: 2;
  line-height: 1.55;
  margin-bottom: calc(0.5 * var(--dk-rem));
  min-height: calc(1.55em * 2);
}
.douga-okiba .archive-grid .post-sub--txtarea .post--ttl {
  min-height: 3em;
  margin-bottom: auto;
}

/* ---------------------------------------------------------------
   2-f. 判断席の筆入れ（2026-10-15・本部）
   ① TOP の新着は親ページ（html 16px）の中では字が小さく見える（1280 幅で題 11.3px）→ 下限を置く
   ② スマホの TOP は 3 枚縦積みで約 1,300px→ 2・3 本目は横並びの小さい行にして高さを半分近くに（一覧は従来どおり縦積み）
   --------------------------------------------------------------- */
.douga-latest .post-sub--txtarea .post--ttl { font-size: max(15px, calc(1.0625 * var(--dk-rem))); }
.douga-latest .post-date-inline { font-size: max(12px, calc(0.8125 * var(--dk-rem))); }
.douga-latest .cat_list span { font-size: max(12px, calc(0.875 * var(--dk-rem))); }
@media (max-width: 599px) {
  .douga-latest .archive-grid { gap: calc(1 * var(--dk-rem)); }
  .douga-latest .archive-grid .post-sub:nth-child(n+2) { border-radius: calc(0.75 * var(--dk-rem)); }
  .douga-latest .archive-grid .post-sub:nth-child(n+2) .post--lnk { flex-direction: row; align-items: stretch; }
  .douga-latest .archive-grid .post-sub:nth-child(n+2) .post-sub--img { flex: 0 0 42%; aspect-ratio: 16 / 9; align-self: center; }
  .douga-latest .archive-grid .post-sub:nth-child(n+2) .post-sub--txtarea { padding: calc(0.6 * var(--dk-rem)) calc(0.75 * var(--dk-rem)); min-width: 0; }
  .douga-latest .archive-grid .post-sub:nth-child(n+2) .post--info { margin-bottom: calc(0.4 * var(--dk-rem)); gap: calc(0.35 * var(--dk-rem)); }
  .douga-latest .archive-grid .post-sub:nth-child(n+2) .post--ttl { font-size: max(13px, calc(0.95 * var(--dk-rem))); min-height: 0; -webkit-line-clamp: 3; }
}

/* ---------------------------------------------------------------
   2-g. 判断席の筆入れ（便 2・2026-10-15・本部）
   一覧（/video/）の題・公開日・札にも下限を置く（1280 幅で題 11.3px・公開日 8.7px・札 9.3px は親ページの中で小さい）。
   題＝max(14px, 今の値)・公開日と札＝max(12px, 今の値)。先頭の大きいカード（pickup）と 3 列のカードの両方。TOP の新着（2-f の 15px）は変えない。
   --------------------------------------------------------------- */
.douga-archive .post--ttl { font-size: max(14px, calc(1.25 * var(--dk-rem))); }
.douga-archive .post-sub--txtarea .post--ttl { font-size: max(14px, calc(1.0625 * var(--dk-rem))); }
.douga-archive .post-date-inline { font-size: max(12px, calc(0.8125 * var(--dk-rem))); }
.douga-archive .cat_list span { font-size: max(12px, calc(0.875 * var(--dk-rem))); }

/* ---------------------------------------------------------------
   2-h. 判断席の筆入れ（便 2・2026-10-15・本部）
   一覧の 3 列（1024px 以上の archive-grid）だけ、全カードで公開日を札の行の下に置き、区切りの縦線を出さない。
   2-g の字の下限で「新着＋番組＋公開日」が 1 行に入らなくなったため。札の有無に関わらず同じ組み＝同じ段の題の高さがそろう。
   先頭の大きいカード・2 列以下・TOP の新着はそのまま。
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
  .douga-archive .archive-grid .post-sub .post-date-inline { flex-basis: 100%; }
  .douga-archive .archive-grid .post-sub .post-date-inline::before { display: none; }
}

/* ---------------------------------------------------------------
   3. 一覧（ブログのカテゴリ一覧 /perspective/ などの部品）
   --------------------------------------------------------------- */
/* blog.css L4717〜L4719 */
.douga-okiba .archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(2.4 * var(--dk-rem)) calc(2 * var(--dk-rem));
  margin-top: calc(3 * var(--dk-rem));
}
@media (max-width: 1023px) {
  .douga-okiba .archive-grid { grid-template-columns: repeat(2, 1fr); gap: calc(2 * var(--dk-rem)) calc(1.4 * var(--dk-rem)); }
}
@media (max-width: 599px) {
  .douga-okiba .archive-grid { grid-template-columns: 1fr; gap: calc(1.6 * var(--dk-rem)); }
}

/* 最新 1 本を大きく（blog.css L888・L3889・L3893・L4712〜L4754） */
.douga-okiba .archive-pickup { margin-top: calc(3 * var(--dk-rem)); }
.douga-okiba .archive-pickup .post-pickup {
  border-radius: calc(1.5 * var(--dk-rem));
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(42, 31, 31, 0.08);
  background: #fff;
  transition: var(--dk-transit);
  display: flex;
  flex-direction: row;
  height: 100%;
}
.douga-okiba .archive-pickup .post-pickup:hover {
  box-shadow: var(--dk-shadow-sm);
  transform: translateY(calc(-0.25 * var(--dk-rem)));
}
.douga-okiba .archive-pickup .post-pickup .post--lnk {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  width: 100%;
}
/* ブログは画像の枠を行の高さに合わせる（L4739: aspect-ratio:auto・height:100%・min-height:22rem）。
   YouTube の hqdefault は 4:3 で上下に黒帯があり、その枠では黒帯が見える（便 0 の撮影で確認）。
   そこで同じブログの一つ前の値（L4713: aspect-ratio:16/9）に戻し、min-height を外して枠を 16:9 に保つ。 */
.douga-okiba .archive-pickup .post-pickup--img {
  position: relative;
  aspect-ratio: 16 / 9;
  align-self: start;
  overflow: hidden;
  background-color: #dadada;
}
.douga-okiba .archive-pickup .post-pickup--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.douga-okiba .archive-pickup .post-pickup--txtarea {
  padding: calc(2.4 * var(--dk-rem)) calc(2.4 * var(--dk-rem)) calc(2 * var(--dk-rem));
  display: flex;
  flex-direction: column;
  gap: calc(0.9 * var(--dk-rem));
  background: #fff;
}
@media (max-width: 1023px) {
  .douga-okiba .archive-pickup .post-pickup .post--lnk { grid-template-columns: 1fr; }
}

/* ページ送り（blog.css L4756〜L4772） */
.douga-okiba .archive-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(0.6 * var(--dk-rem));
  margin: calc(5 * var(--dk-rem)) 0 calc(6 * var(--dk-rem));
  flex-wrap: wrap;
}
.douga-okiba .archive-pagination a,
.douga-okiba .archive-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(2.6 * var(--dk-rem));
  height: calc(2.6 * var(--dk-rem));
  padding: 0 calc(0.8 * var(--dk-rem));
  border: 1px solid #d8d4ce;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: calc(0.95 * var(--dk-rem));
  color: #444;
  text-decoration: none;
  transition: all 0.2s;
  background: #fff;
}
.douga-okiba .archive-pagination a:hover,
.douga-okiba .archive-pagination .current { background: #b40d18; color: #fff; border-color: #b40d18; }
.douga-okiba .archive-pagination .prev,
.douga-okiba .archive-pagination .next { padding: 0 calc(1.2 * var(--dk-rem)); }

/* 「すべての動画」「YouTube で見る」（ブログ TOP の「〜をもっと見る」blog.css L1678〜L1713・矢印 L620〜L646） */
.douga-okiba .posts-more {
  padding: calc(3 * var(--dk-rem)) 0 calc(5 * var(--dk-rem));
  background-color: var(--dk-bg);
  text-align: center;
}
.douga-okiba .posts-more--link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.875 * var(--dk-rem));
  color: var(--dk-text);
}
.douga-okiba .posts-more--link:hover { opacity: 1; }
.douga-okiba .posts-more--label {
  display: inline-flex;
  align-items: center;
  padding: calc(0.625 * var(--dk-rem)) calc(2 * var(--dk-rem));
  background-color: var(--dk-text);
  color: #fff;
  border-radius: calc(2 * var(--dk-rem));
  font-size: calc(0.9375 * var(--dk-rem));
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: var(--dk-transit);
}
.douga-okiba .posts-more--link:hover .posts-more--label,
.douga-okiba .posts-more--link:hover .arrow { background-color: var(--dk-primary-dark); }
.douga-okiba .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--dk-primary);
  flex-shrink: 0;
  transition: var(--dk-transit);
}
.douga-okiba .arrow-lg {
  width: calc(4.5 * var(--dk-rem));
  height: calc(4.5 * var(--dk-rem));
}
.douga-okiba .arrow svg {
  width: calc(0.8125 * var(--dk-rem));
  height: calc(0.8125 * var(--dk-rem));
  fill: #fff;
}

/* ---------------------------------------------------------------
   4. 1 本のページ（ブログ記事 single の部品・右の列は無し）
   --------------------------------------------------------------- */
/* blog.css L4007（1 列で使う） */
.douga-okiba .single-article {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 calc(1.5 * var(--dk-rem)) calc(4 * var(--dk-rem));
}
/* 埋め込みの代わり＝アイキャッチの枠（blog.css L4032・L4451）に YouTube のサムネと再生印 */
.douga-okiba .single-eyecatch {
  aspect-ratio: 16 / 9;
  background-color: #fbf8f3;
  background-image: radial-gradient(circle, rgba(200, 169, 106, 0.25) 1.2px, transparent 1.4px);
  background-size: 14px 14px;
  border-radius: 8px;
  margin: calc(2 * var(--dk-rem)) 0;
  position: relative;
  overflow: hidden;
}
.douga-okiba .single-eyecatch > a { display: block; position: absolute; inset: 0; }
.douga-okiba .single-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
}
/* 再生印＝親テーマの img/youtube.svg（ヘッダーの YouTube の印）を真ん中に置く */
.douga-okiba .single-eyecatch img.douga-play {
  width: 68px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  border-radius: 0;
}
/* 見出し（blog.css L4013・L4015・L4580・L4596・L4653・L4654・L4656・L4683） */
.douga-okiba .single-header { margin-bottom: calc(1.5 * var(--dk-rem)); }
.douga-okiba .single-header .post--info { gap: 12px; margin-bottom: calc(0.6 * var(--dk-rem)); }
.douga-okiba .single-header .post--info .cat_list span { font-size: 13px; padding: 5px 14px; }
.douga-okiba .single-header .post-date-inline { font-size: 13px; }
.douga-okiba .single-header h1 {
  font-family: 'Zen Old Mincho', serif;
  font-size: 35px;
  line-height: 1.4;
  margin: calc(1 * var(--dk-rem)) 0;
  color: #2a1f1f;
}
@media (max-width: 767px) {
  .douga-okiba .single-header .post--info { gap: 8px; }
  .douga-okiba .single-header h1 { font-size: 26px; }
}
/* 章＝記事の目次の箱（blog.css L4057〜L4079・L4630・L4631。リンクの色は front.js が inherit にしている） */
.douga-okiba .single-toc {
  background: #fbf8f3;
  border-left: 4px solid #d50d0d;
  padding: calc(1.5 * var(--dk-rem)) calc(1.6 * var(--dk-rem));
  border-radius: 0 8px 8px 0;
  margin: calc(2 * var(--dk-rem)) 0;
}
.douga-okiba .single-toc h2 {
  font-size: 16px;
  margin: 0 0 calc(0.8 * var(--dk-rem));
  color: #2a1f1f;
}
.douga-okiba .single-toc ol {
  font-size: 15px;
  line-height: 1.95;
  list-style: decimal;
  margin: 0;
  padding-left: calc(1.4 * var(--dk-rem));
}
/* 本文＝概要欄（blog.css L4093・L4556・L4593） */
.douga-okiba .single-body p {
  font-size: 17px;
  line-height: 1.95;
  margin: calc(1 * var(--dk-rem)) 0;
  overflow-wrap: anywhere;
}
.douga-okiba .single-body a { text-decoration: underline; }
@media (max-width: 767px) {
  .douga-okiba .single-body p { font-size: 16px; line-height: 1.85; }
}

/* ---------------------------------------------------------------
   5. 置き場の外枠（新しい意匠ではなく、既存の箱の値を写す）
   --------------------------------------------------------------- */
/* TOP の新着＝親テーマ style.css の .factsheet の箱（幅 1080・余白 100/24/72・〜1079px と 〜767px の値） */
.douga-latest {
  width: 1080px;
  max-width: 100%;
  margin: 0 auto;
  padding: 100px 24px 72px;
}
@media (max-width: 1079px) {
  .douga-latest { width: 100%; padding: 72px 20px 60px; }
}
@media (max-width: 767px) {
  .douga-latest { padding: 48px 16px 40px; }
}
.douga-latest .archive-grid { margin-top: 0; }
.douga-latest .posts-more { padding-bottom: 0; background-color: transparent; }

/* 一覧と 1 本の main（blog.css L103 の .inner・L158 の .section_pdg の値。親の main が flex なので幅 100%） */
.douga-archive,
.douga-single { width: 100%; }
.douga-archive .inner {
  width: 100%;
  max-width: calc(75 * var(--dk-rem));
  margin: 0 auto;
  padding: calc(1 * var(--dk-rem)) calc(1.5 * var(--dk-rem)) calc(5 * var(--dk-rem));
}
@media (max-width: 47.9375em) {
  .douga-archive .inner { padding-bottom: calc(2.8571428571 * var(--dk-rem)); }
}

/* 周期の 1 行（有り版だけ）＝親テーマ style.css の .factsheet .slogan-bar／.slogan-text の値 */
.douga-okiba .douga-shuuki {
  text-align: center;
  margin: 32px 0 40px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #333;
}
@media (max-width: 767px) {
  .douga-okiba .douga-shuuki { font-size: 18px; letter-spacing: 2px; }
}

/* 表示モード「ゴンドラ有り」＝公開日を前に（行の先頭へ出し、色を本文の墨にする。区切りの縦線は先頭では消す） */
.douga-mode-ari .post--info .post-date-inline { color: var(--dk-text); font-weight: 700; }
.douga-mode-ari .post--info .post-date-inline:first-child::before { display: none; }

/* ---------------------------------------------------------------
   7. 本物の埋め込み（便 2 で足した 1 規則）
   モックの「アイキャッチの枠」（4 節 .single-eyecatch＝16:9・角丸 8px）の中に youtube-nocookie の iframe を置く。
   枠の値はモックのまま。iframe を枠いっぱいに広げるだけで、新しい意匠は足さない。
   --------------------------------------------------------------- */
.douga-okiba .single-eyecatch iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}