/* =======================================================
   JP Videos style — archive & single（精選版）
   影響範囲：/wp/videos/（.channel-wrap） と single-videos
   ======================================================= */

/* 共通の安全策 */
.channel-wrap,
.l-main .p-video-single { box-sizing: border-box; }

/* --------------------------------------
   /wp/videos/  一覧（ヘッダー/タブ/ジャンル）
-------------------------------------- */
.channel-wrap .channel-header { margin: 40px auto 24px; padding: 0 16px; max-width: 1120px; }
.channel-wrap .channel-title  { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.channel-wrap .channel-nav    { display: grid; gap: 12px; }

.channel-wrap .channel-tabs,
.channel-wrap .channel-genres {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0;
}
.channel-wrap .channel-tabs .tab,
.channel-wrap .channel-genres .genre {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 16px; border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 14px;
  border: 1px solid #E5E7EB; background: #fff; color: #333;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.channel-wrap .channel-tabs .tab:hover,
.channel-wrap .channel-genres .genre:hover { background: #fafafa; transform: translateY(-1px); }
.channel-wrap .channel-tabs .tab.is-active     { background: #FF7A00; border-color:#FF7A00; color:#fff; }
.channel-wrap .channel-genres .genre.is-active { border-color:#FF7A00; color:#FF7A00; }

/* 一覧グリッド/カード */
.p-video-gallery { padding: 0 16px 48px; max-width: 1120px; margin: 0 auto; }
.p-video-gallery__grid { display: grid; gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
@media (max-width:1024px){ .p-video-gallery__grid { gap:16px; } }
@media (min-width:1025px){ .p-video-gallery__grid > .p-video-gallery__item { grid-column: span 3; } }
@media (max-width:1024px){ .p-video-gallery__grid > .p-video-gallery__item { grid-column: span 4; } }
@media (max-width:640px) { .p-video-gallery__grid > .p-video-gallery__item { grid-column: span 12; } }

.p-video-card {
  display:block; background:#fff; border:1px solid #eee; border-radius:12px;
  overflow:hidden; text-decoration:none; color:inherit; transition: box-shadow .2s, transform .2s;
}
.p-video-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.p-video-card__thumb { position:relative; aspect-ratio:16/9; background:#f6f7f8; }
.p-video-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.p-video-card__thumb--placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#999; font-size:14px; }
.p-video-card__body  { padding:12px 14px 14px; }
.p-video-card__title { font-size:16px; font-weight:700; line-height:1.5; margin:0 0 8px; color:#111;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.p-video-card__meta { display:flex; gap:8px; align-items:center; color:#666; font-size:12px; }
.p-video-card__meta .meta--svc { background:#FFF0E6; color:#FF7A00; border-radius:6px; padding:3px 8px; }
.p-video-card__tags { margin:10px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.p-video-card__tags li { font-size:12px; color:#555; background:#f3f4f6; padding:3px 8px; border-radius:6px; }

/* ページネーション */
.p-pagination { margin:24px auto 0; display:flex; justify-content:center; }
.p-pagination .page-numbers {
  display:inline-flex; min-width:38px; height:38px; align-items:center; justify-content:center; margin:0 4px;
  border:1px solid #E5E7EB; border-radius:8px; text-decoration:none; color:#333; font-weight:700;
}
.p-pagination .page-numbers.current { background:#FF7A00; color:#fff; border-color:#FF7A00; }

/* --------------------------------------
   single-videos  個別（ここからは body.single-videos に限定）
-------------------------------------- */

/* ヘッダー直下の余白を最小に */
body.single-videos .header-line{ margin-top:6px !important; height:0 !important; border:0 !important; }

/* パンくず（横並び＋小さめ） */
body.single-videos .common_bread{ margin-top:8px !important; }
body.single-videos .common_bread .common_inner{ padding-left:0; padding-right:0; }
body.single-videos .common_bread .common_inner ul{
  display:flex !important; flex-wrap:wrap; gap:8px; margin:0 !important; padding:0 !important; list-style:none !important;
}
body.single-videos .common_bread .common_inner li{ display:inline-flex; align-items:center; }
body.single-videos .common_bread .common_inner li+li::before{ content:">"; color:#999; margin:0 6px; }
body.single-videos .common_bread a{ font-size:13px !important; line-height:1.6; color:#0b69a3; text-decoration:none; }

/* コンテナ/タイトル/動画 */
body.single-videos .p-video-single{ max-width:920px; padding:12px 16px 48px; }
body.single-videos .p-video-single__title,
body.single-videos .p-video-single_title{ /* 互換：__ と _ を両対応 */
  font-size:22px !important; line-height:1.35 !important; font-weight:800; margin:6px 0 12px !important; text-align:left !important;
}
@media (max-width:768px){
  body.single-videos .p-video-single__title,
  body.single-videos .p-video-single_title{ font-size:20px !important; }
}
body.single-videos .p-video-single__iframe{ margin:10px 0 14px !important; }
body.single-videos .p-video-single__iframe-inner{ aspect-ratio:16/9; background:#000; }

/* 本文ベース（標準フォント固定＋継承で均す） */
body.single-videos .p-video-single__content,
body.single-videos .p-video-single_content{ /* 互換 */
  font-size:15px !important; line-height:1.85 !important; color:#111;
}
body.single-videos .p-video-single__content :where(p,h1,h2,h3,h4,h5,h6),
body.single-videos .p-video-single_content  :where(p,h1,h2,h3,h4,h5,h6){
  font-size: inherit !important; line-height: inherit !important;
}

/* 広域指定の遮断（.l-main 経由の拡大を止める） */
body.single-videos .l-main :is(p,h1,h2,h3,h4,h5,h6){
  font-size: inherit !important; line-height: inherit !important;
}

/* 見出しサイズ（本文内に限定・互換） */
body.single-videos .p-video-single__content h1,
body.single-videos .p-video-single_content  h1{ font-size:24px !important; line-height:1.35 !important; margin:0 0 14px !important; }
body.single-videos .p-video-single__content h2,
body.single-videos .p-video-single_content  h2{ font-size:20px !important; line-height:1.5  !important; margin:1.0em 0 .6em !important; }
body.single-videos .p-video-single__content h3,
body.single-videos .p-video-single_content  h3{ font-size:17px !important; line-height:1.6  !important; margin:.9em 0 .5em !important; }

/* Gutenberg の巨大フォントユーティリティを抑制 */
body.single-videos .has-xx-large-font-size,
body.single-videos .has-x-large-font-size,
body.single-videos .has-huge-font-size { font-size:20px !important; line-height:1.5 !important; }
body.single-videos .has-large-font-size  { font-size:18px !important; line-height:1.6 !important; }
body.single-videos .has-medium-font-size { font-size:16px !important; line-height:1.75 !important; }

/* （任意・より強固）Gutenbergプリセット変数の下限を設定 */
body.single-videos{
  --wp--preset--font-size--small: 15px;
  --wp--preset--font-size--medium: 15px;
  --wp--preset--font-size--large: 18px;
  --wp--preset--font-size--x-large: 20px;
  --wp--preset--font-size--xx-large: 20px;
  --wp--preset--font-size--huge: 20px;
}

/* リスト・表 */
body.single-videos .p-video-single__content ul,
body.single-videos .p-video-single__content ol,
body.single-videos .p-video-single_content  ul,
body.single-videos .p-video-single_content  ol{ padding-left:1.4em; margin:.7em 0; }
body.single-videos .p-video-single__content li,
body.single-videos .p-video-single_content  li{ margin:.25em 0; }
body.single-videos .p-video-single__content table,
body.single-videos .p-video-single_content  table{ width:100%; border-collapse:collapse; margin:1em 0; }
body.single-videos .p-video-single__content th,
body.single-videos .p-video-single__content td,
body.single-videos .p-video-single_content  th,
body.single-videos .p-video-single_content  td{ border:1px solid #e5e7eb; padding:.55em .75em; font-size:14px; }

/* 戻るボタン（既存色維持） */
body.single-videos .p-video-single__back{ margin-top:18px; text-align:center; }
body.single-videos .p-video-single .c-btn.c-btn--blue{ background:#FF7A00 !important; }

/* --------------------------------------
   ボタンだけ巨大化する問題の統一対処（single-videos 限定）
-------------------------------------- */

/* フォント基準を px に固定（rem/clamp連鎖の遮断） */
body.single-videos .p-video-single :is(
  a, button, .c-btn, [class*="btn"], a.button, .wp-block-button__link, .wp-element-button
){
  font-size:14px !important; line-height:1.4 !important;
}

/* 見た目（パディング/角丸）を安定化 */
body.single-videos .p-video-single :is(
  .c-btn, [class*="btn"], a.button, .wp-block-button__link, .wp-element-button
){
  padding:10px 20px !important; border-radius:8px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  text-decoration:none; letter-spacing:normal !important;
}

/* 広域・装飾系の無効化（念のため） */
body.single-videos .p-video-single :is(
  .c-btn, [class*="btn"], a.button, .wp-block-button__link, .wp-element-button
){
  transform:none !important; text-transform:none !important;
}

/* .l-main 経由の拡大を無視 */
body.single-videos .l-main :is(.c-btn,[class*="btn"],a.button,.wp-block-button__link,.wp-element-button){
  font-size:inherit !important; line-height:inherit !important;
}

/* ==========================================
   single-videos：画像だけ巨大化する問題の止血
   （Gutenberg画像/align系/サイズ指定を包括）
   ========================================== */

/* 画像は .p-video-single 配下なら常にコンテナ以内に収める */
body.single-videos .p-video-single img{
  max-width:100% !important;
  height:auto !important;
}

/* Gutenberg画像ブロック（inline width/size-xxx/等）も抑える */
body.single-videos .p-video-single .wp-block-image img{
  max-width:100% !important;
  height:auto !important;
}

/* figure自体のはみ出しを禁止（alignwide/alignfullを無害化） */
body.single-videos .p-video-single .wp-block-image{
  max-width:100%;
  overflow:hidden;
}

/* 右寄せ/左寄せの画像が横に暴れないよう幅を上限 */
@media (min-width: 769px){
  body.single-videos .p-video-single .wp-block-image.alignright img,
  body.single-videos .p-video-single .wp-block-image.alignleft  img{
    max-width:50% !important; /* 適宜 40〜60%で調整可 */
  }
}
/* スマホでは寄せ解除に近いふるまいで1カラム化 */
@media (max-width: 768px){
  body.single-videos .p-video-single .wp-block-image.alignright,
  body.single-videos .p-video-single .wp-block-image.alignleft{
    float:none !important;
    margin-left:0; margin-right:0;
    text-align:center;
  }
  body.single-videos .p-video-single .wp-block-image.alignright img,
  body.single-videos .p-video-single .wp-block-image.alignleft  img{
    max-width:100% !important;
  }
}

/* もしインラインstyleで width:1200px; 等が付いていても効かせる保険 */
body.single-videos .p-video-single .wp-block-image img[style*="width"],
body.single-videos .p-video-single img[style*="width"]{
  width:auto !important;              /* 幅の固定指定を解除 */
  max-width:100% !important;          /* コンテナにフィット */
}