@charset "UTF-8";
/* Basic reset and typography */
* {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
}

body {
  margin: 0;
  /* Inter を先頭、続いて Zen Kaku を指定し、ラテンは Inter、日本語は Zen Kaku を優先使用 */
  font-family: "Inter", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  color: #222;
}

/* Sticky footer layout: body as flex column, footer pushed to bottom when content is short */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

main {
  flex: 1 0 auto;
}

/* Japanese text tuning only (font-family は body で共通指定) */
:lang(ja) {
  letter-spacing: 0.01em;
}

/* Slightly lighter weight for JP headings to match Inter’s perceived weight. */
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  font-weight: 600;
}

/* Layout containers */
/* main と footer は中央寄せ、header は full-bleed（front-page と同様の見た目へ） */
footer,
main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

/* Header は常にフル幅。front-page に寄せて左右 2vw（PC）へ寄せる */
header {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1rem; /* mobile/base */
}

/* Footer: full-bleed brand mark */
footer {
  max-width: none; /* full-bleed */
  padding: 0 2vw; /* 左右に少し余白を付与 */
  overflow: visible; /* avoid clipping */
  position: relative; /* create stacking context above particles */
  z-index: 10;
}

/* モバイルの絶対配置（検証用）は撤回 */
.footer-brand {
  display: block;
  width: 100%;
  margin: 0;
}

.footer-brand svg {
  display: block;
  width: 100%;
  height: auto;
}

.footer-brand .letter {
  transform: translateY(100vh);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* Color animation for outline glyphs (override any inline fills) */
.footer-brand .letter,
.footer-brand .letter * {
  fill: var(--brand-fill, #000) !important;
  transition: fill var(--brand-dur, 600ms) ease;
}

.footer-brand-svg text {
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none; /* avoid synthetic bold */
  letter-spacing: -0.01em; /* 軽く詰めてサイドベアリング感を抑える */
}

/* Header branding and logo positioning */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-title {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  color: #6b7280;
  font-size: 0.9rem;
}

.custom-logo {
  max-height: 40px;
  height: auto;
  width: auto;
}

/* ---------------------------------------------
   モバイル用フローティングハンバーガーメニュー.
   画面右下に常時表示し、タップでオーバーレイメニューを開閉する.
---------------------------------------------- */
.mobile-menu-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 9999px;
  background: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 260ms ease-in-out, transform 260ms ease-in-out; /* 半透明/出し入れを滑らかにする. */
  will-change: opacity, transform; /* モバイルでも滑らかに表示するためのヒントを付与する. */
}

.mobile-menu-toggle .bar {
  position: absolute;
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}

.mobile-menu-toggle .bar1 {
  transform: translateY(-7px);
}

.mobile-menu-toggle .bar2 {
  transform: translateY(0);
}

.mobile-menu-toggle .bar3 {
  transform: translateY(7px);
}

.mobile-menu-toggle[aria-expanded=true] .bar1 {
  transform: rotate(45deg);
}

.mobile-menu-toggle[aria-expanded=true] .bar2 {
  opacity: 0;
}

.mobile-menu-toggle[aria-expanded=true] .bar3 {
  transform: rotate(-45deg);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: block;
}

.mobile-menu .mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: #000; /* 不透明な黒にして opacity でフェードさせる. */
  opacity: 0; /* 初期は非表示. */
  transition: opacity 280ms ease; /* フェードイン/アウト. */
}

.mobile-menu.is-open .mobile-menu-backdrop {
  opacity: 0.4;
}

.mobile-menu .mobile-menu-panel {
  /* ハンバーガーボタンのすぐ上に出すフローティングシート（右端から16px離す）. */
  position: absolute;
  right: 16px;
  bottom: 84px; /* 16px（余白）+ 56px（ボタン）+ 12px（間隔）. */
  top: auto;
  width: min(88vw, 360px);
  max-height: 60vh; /* 上半分を目安にしつつ、画面高に追従. */
  background: rgba(0, 0, 0, 0.8); /* 黒ベタの80%不透明で視認性を確保する. */
  color: #fff; /* パネル内のテキストは白文字にする. */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  overflow: auto; /* コンテンツが溢れた場合は内部スクロール. */
  -webkit-overflow-scrolling: touch;
  transform: translateX(calc(100% + 16px)); /* 右からスライドイン. */
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem 1rem;
}

.mobile-menu.is-open .mobile-menu-panel {
  transform: translateX(0);
}

.mobile-menu-close {
  border: none;
  background: transparent;
  color: #fff; /* 黒いパネル上で視認しやすいように白にする. */
  font-size: 2rem;
  line-height: 1;
  padding: 0.25rem;
  align-self: flex-end;
}

.mobile-menu-nav {
  margin-top: 0.5rem;
}

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobile-menu-list a {
  display: block;
  padding: 0.875rem 0;
  color: #fff;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 600;
}

.mobile-menu-list a:hover, .mobile-menu-list a:focus {
  text-decoration: underline;
}

/* スクロール中のみ半透明にして主張を弱める（メニューオープン時は除外）. */
body.is-scrolling:not(.mobile-menu-open) .mobile-menu-toggle {
  opacity: 0.4;
  transform: translateY(0) scale(0.5); /* スクロール中は小さく縮小する. */
}

/* Hero が可視の間はボタンを非表示（アニメで下に少し逃がす）. */
body.hero-inview:not(.mobile-menu-open):not(.is-scrolling) .mobile-menu-toggle {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle {
    transition: none;
  }
}
/* デスクトップではフローティングボタンとモバイルメニューを非表示にする. */
@media (min-width: 1024px) {
  .mobile-menu-toggle {
    display: none;
  }
  .mobile-menu {
    display: none;
  }
}
/* メニュー表示中は背面のスクロールを抑止する（JS が body にクラスを付与）. */
body.mobile-menu-open {
  overflow: hidden;
}

/* Front page: allow full-bleed header on desktop via landing.css override */
/* YouTube card (shortcode [yt]) */
.yt-card {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
}
.yt-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.yt-card .yt-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fff;
  opacity: 0.9;
  transform: scale(1);
  transition: transform 200ms ease, opacity 200ms ease, background-color 200ms ease;
  will-change: transform, opacity;
}
.yt-card:hover .yt-play, .yt-card:focus-within .yt-play {
  transform: scale(1.08);
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

/* Vimeo card (shortcode [vimeo]) */
.vimeo-card {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 0;
}
.vimeo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* サムネイルをトリミングして全面に表示する. */
  display: block;
}
.vimeo-card .vimeo-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fff;
  opacity: 0.9;
  transform: scale(1);
  transition: transform 200ms ease, opacity 200ms ease, background-color 200ms ease;
  will-change: transform, opacity;
}
.vimeo-card:hover .vimeo-play, .vimeo-card:focus-within .vimeo-play {
  transform: scale(1.08);
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}

/* その場再生用の埋め込みコンテナ. */
.vimeo-embed {
  position: relative; /* iframe を絶対配置で全面に広げるための基準にする. */
  display: block; /* ブロック要素として扱う. */
  width: 100%; /* 親幅いっぱいに広げる. */
  aspect-ratio: 16/9; /* 既定の比率を 16:9 とする. */
  overflow: hidden; /* はみ出しを隠す. */
}

.vimeo-embed::before {
  content: ""; /* aspect-ratio 未対応ブラウザ向けの高さ確保. */
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

.vimeo-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

@supports (aspect-ratio: 1/1) {
  .vimeo-embed::before {
    display: none;
  }
}
/* YouTube その場再生用の埋め込みコンテナ. */
/* YouTube のサムネイルカード（ショートコード [yt]）のみをサポートする。 */
/* 404 page layout: brand like front, centered big 404 */
body.error404 header.site-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  background: transparent;
  max-width: none;
  padding-left: 2vw;
  padding-right: 2vw;
}

body.error404 main {
  max-width: none;
  padding: 0;
}

body.error404 .not-found-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 2rem;
}

@supports (height: 100svh) {
  body.error404 .not-found-hero {
    min-height: 100svh;
  }
}
@supports (height: 100dvh) {
  body.error404 .not-found-hero {
    min-height: 100dvh;
  }
}
body.error404 .not-found-hero .big-404 {
  font-size: clamp(6rem, 18vw, 18rem);
  line-height: 1;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
}

body.error404 .not-found-hero .lead {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0.25rem 0;
}

body.error404 .not-found-hero .sublead {
  color: #6b7280;
  font-size: clamp(0.95rem, 2vw, 1.125rem);
  margin: 0.25rem 0 0;
}

/* a11y helper for hidden heading */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 1px 0);
  white-space: nowrap;
  border: 0;
}

/* 404: hide footer to avoid extra scroll */
body.error404 footer {
  display: none;
}

/* Header: desktop で front-page と同様の左右余白に統一 */
@media (min-width: 1024px) {
  header.site-header {
    max-width: none;
    margin: 0;
    padding-left: 2vw;
    padding-right: 2vw;
  }
}
/* Single page title: make larger */
body.single .entry-title {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;
  font-weight: 800;
}

/* 固定ページのタイトルサイズを投稿ページと揃える. */
body.page .entry-title {
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;
  font-weight: 800;
}

/* Remove side paddings on entry-header across templates */
.entry-header {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ---------------------------------------------
   CTA band (global, above footer)
   Matches front-page styles without requiring landing.css
---------------------------------------------- */
.cta-band {
  background: #f7f7f8; /* var(--surface) on front page */
  border-top: 1px solid #e5e7eb; /* var(--border) */
  border-bottom: 1px solid #e5e7eb;
}

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.cta-band .landing-container {
  max-width: 1120px; /* same as landing.scss var(--maxw) */
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  /* Match landing.scss base vertical rhythm (6rem) */
  padding-top: 6rem;
  padding-bottom: 6rem;
  display: flex; /* 見出しとナビを横並びにする土台にする. */
  flex-wrap: wrap; /* フッターノートは次の行に回す. */
  align-items: flex-start; /* 上付で揃える. */
  gap: 1rem 2rem; /* 適度な間隔を設ける. */
}

.cta-band .section-header {
  margin-bottom: 1.5rem;
}

.cta-band .section-header h2 {
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  margin: 0 0 0.5rem 0;
}

.cta-band .section-header p {
  color: #6b7280; /* muted */
  margin: 0;
}

.cta-band .cta-nav {
  margin-top: 1.25rem;
}

.cta-band .cta-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* 縦に並べる. */
  gap: 0.25rem; /* 項目間の縦方向の間隔をさらに詰める. */
  align-items: flex-start; /* スマホでは左寄せにする. */
}

.cta-band .cta-menu li {
  margin: 0;
} /* 余白を完全に打ち消す. */
.cta-band .cta-menu a {
  text-decoration: none;
  color: #111827; /* near black */
  font-weight: 600; /* 見出しと同じ太さにする（:lang(ja) h2 と揃える）。 */
  font-size: clamp(1.25rem, 3.5vw, 2rem); /* 見出しと同じサイズにする. */
  line-height: 1.1; /* 行間を詰めて縦の密度を上げる. */
}

.cta-band .cta-menu a:hover,
.cta-band .cta-menu a:focus {
  text-decoration: none; /* CTAのリンク文字は下線を表示しない. */
}

.cta-band .footer-note {
  color: #6b7280; /* muted */
  font-size: 0.9rem;
  flex: 0 0 100%; /* 常に次の行で全幅にする. */
}

@media (min-width: 1024px) {
  .cta-band .landing-container {
    max-width: none;
    width: 100%;
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .cta-band .section-header {
    margin-bottom: 0;
  } /* 横並び時は余白を除去する. */
  .cta-band .cta-nav {
    margin-top: 0;
    margin-left: auto;
  } /* 右端に寄せる. */
  .cta-band .cta-menu {
    align-items: flex-end;
  } /* デスクトップでは右端に揃える. */
}
body.single .entry-header {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Single: featured image full within content container */
body.single .entry-thumb {
  margin: 0 0 1.25rem; /* add small space below */
}

body.single .entry-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------
   Single: 前後記事ナビゲーションのスタイル.
   本文直下に左右分割でタイトルリンクを配置する.
---------------------------------------------- */
body.single .entry-nav {
  margin-top: 2rem;
  border-top: 1px solid #e5e7eb; /* 薄い区切り線を上部に引く. */
  padding-top: 1rem;
}

body.single .entry-nav-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
}

body.single .entry-nav .nav-previous,
body.single .entry-nav .nav-next {
  flex: 1 1 0;
}

body.single .entry-nav .nav-link {
  display: block;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

body.single .entry-nav .nav-link:hover,
body.single .entry-nav .nav-link:focus {
  background: #f9fafb;
  border-color: #d1d5db;
}

body.single .entry-nav .nav-label {
  display: block;
  font-size: 0.8rem;
  color: #6b7280; /* 補助テキストは控えめにする. */
  margin-bottom: 0.25rem;
}

body.single .entry-nav .nav-title {
  display: block;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 640px) {
  body.single .entry-nav .nav-title {
    font-size: 0.98rem;
  }
}
/* Single: date next to title */
body.single .entry-head {
  position: relative;
}

body.single .entry-head .entry-date-out {
  position: absolute;
  top: 0;
  left: calc(100% + 0.75rem);
  white-space: nowrap;
  font-size: clamp(0.95rem, 2.2vw, 1.125rem);
  color: #6b7280; /* muted */
  line-height: 1.2;
}

@media (max-width: 800px) {
  body.single .entry-head .entry-date-out {
    position: static;
    display: block;
    margin-top: 0.25rem;
    margin-left: 0;
  }
}
/* GL effect support for single page featured image */
body.single .entry-thumb .tile {
  position: relative;
  display: block;
  overflow: hidden;
}

body.single .entry-thumb .tile canvas.gl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

body.single .tile.gl-ready img {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Single page title: apply reveal effect (mobile/PC) */
body.single .entry-title {
  position: relative;
  display: inline-block;
  /* Initially hide text so the black bar reveals it */
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  /* Make text visible shortly after bar stops (~65%) */
  animation: sp-line-appear 0.001s linear forwards;
  animation-delay: 1.04s;
}

body.single .entry-title::after {
  content: "";
  position: absolute;
  /* 黒ベタを上下に少し広げる */
  top: -0.15em;
  bottom: -0.15em;
  right: 0;
  left: -100vw;
  background: #000;
  z-index: 1;
  opacity: 0; /* prevent flash before moving */
  animation: sp-reveal-swipe 1.6s linear forwards;
  will-change: transform;
}

/* 固定ページのタイトルにも同じリビールアニメーションを適用する. */
body.page .entry-title {
  position: relative;
  display: inline-block;
  color: transparent; /* リビール前は文字色を隠す. */
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: sp-line-appear 0.001s linear forwards;
  animation-delay: 1.04s;
}

body.page .entry-title::after {
  content: "";
  position: absolute;
  top: -0.15em;
  bottom: -0.15em;
  right: 0;
  left: -100vw;
  background: #000;
  z-index: 1;
  opacity: 0;
  animation: sp-reveal-swipe 1.6s linear forwards;
  will-change: transform;
}

@keyframes sp-line-appear {
  to {
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
}
@keyframes sp-reveal-swipe {
  0% {
    transform: translateX(-100%);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  40% {
    transform: translateX(0);
    opacity: 1;
  }
  65% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.single .entry-title {
    animation: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
  body.single .entry-title::after {
    animation: none;
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page .entry-title {
    animation: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
  body.page .entry-title::after {
    animation: none;
    display: none;
  }
}
/* Single content: generic in-view fade-in */
body.single .entry-content .inview-fade {
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(2px);
  transition: opacity 600ms ease, transform 600ms ease, filter 600ms ease;
  will-change: opacity, transform, filter;
}

body.single .entry-content .inview-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  body.single .entry-content .inview-fade {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
/* 固定ページ: 汎用フェードイン（single と同仕様）. */
/* 汎用: 固定ページ全般でも同じフェードを適用可能（クラスが付与された場合のみ有効）. */
body.page .entry-content .inview-fade {
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(2px);
  transition: opacity 600ms ease, transform 600ms ease, filter 600ms ease;
  will-change: opacity, transform, filter;
}

body.page .entry-content .inview-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  body.page .entry-content .inview-fade {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}
/* 固定ページ/投稿: 本文の行間をやや広げる（両者を統一）. */
body.page .entry-content p,
body.page .entry-content li,
body.single .entry-content p,
body.single .entry-content li {
  line-height: 1.8;
}

/* 固定ページ/投稿: 段落間の余白をやや拡大（両者を統一）. */
body.page .entry-content p,
body.single .entry-content p {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

body.page .entry-content p:last-child,
body.single .entry-content p:last-child {
  margin-bottom: 0;
}

/* 固定ページ: 本文ブロックの下に少し余白を付ける. */
body.page .entry-content {
  margin-bottom: 5rem; /* さらに広げる. */
}

/* ---------------------------------------------
   Single: 記事内の画像の右側に余白が空かないように調整する（アイキャッチと同様の揃え）.
   ブラウザの既定の figure の左右 40px マージンを打ち消し、コンテナ端まで画像を広げる.
---------------------------------------------- */
body.single .entry-content figure,
body.single .entry-content .wp-block-image {
  margin-left: 0;
  margin-right: 0;
}

body.single .entry-content .wp-block-image img {
  display: block; /* インライン隙間を防ぎ、幅指定を安定させる. */
  width: 100%; /* 記事コンテナの幅いっぱいに広げる. */
  height: auto; /* 縦横比を維持する. */
}

/* ---------------------------------------------
   Single: Vimeo を含む埋め込みブロックの右端に空白が出ないように幅を揃える.
   .wp-block-embed とその内側のラッパー/iframe を全幅にし、アイキャッチと同様に端まで表示する.
---------------------------------------------- */
body.single .entry-content .wp-block-embed {
  margin-left: 0; /* figure の左右既定マージンを打ち消す. */
  margin-right: 0; /* 右端に空白が残らないようにする. */
  width: 100%; /* 埋め込みコンテナ自体を全幅にする. */
  max-width: none; /* テーマやWPコアの max-width による中央寄せを打ち消す. */
}

/* 固定ページでも同様の全幅化を適用する. */
body.page .entry-content .wp-block-embed {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
}

body.page .entry-content .wp-block-embed.aligncenter,
body.page .entry-content .wp-block-embed.alignwide,
body.page .entry-content .wp-block-embed.alignfull {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
}

/* Gutenberg の align クラスが付与されている場合も同様に全幅へ揃える. */
body.single .entry-content .wp-block-embed.aligncenter,
body.single .entry-content .wp-block-embed.alignwide,
body.single .entry-content .wp-block-embed.alignfull {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: none;
}

body.single .entry-content .wp-block-embed__wrapper {
  width: 100%; /* ラッパーを全幅にする. */
  max-width: none; /* 中央寄せのための暗黙の上限を撤廃する. */
}

body.page .entry-content .wp-block-embed__wrapper {
  width: 100%;
  max-width: none;
}

body.single .entry-content .wp-block-embed iframe,
body.single .entry-content iframe[src*="vimeo.com"],
body.single .entry-content iframe[src*="player.vimeo.com"] {
  display: block; /* インラインの隙間を防ぐ. */
  width: 100%; /* 記事コンテナの幅いっぱいに広げる. */
  max-width: 100%; /* 縮みを許容しつつ拡大はさせない. */
  /* 高さはコアのレスポンシブ埋め込みCSS（height:100%）に委ねる. */
}

body.page .entry-content .wp-block-embed iframe,
body.page .entry-content iframe[src*="vimeo.com"],
body.page .entry-content iframe[src*="player.vimeo.com"] {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* YouTube 埋め込み（oEmbed/ブロック）の全幅化（single/page 共通）. */
body.single .entry-content iframe[src*="youtube.com"],
body.single .entry-content iframe[src*="youtube-nocookie.com"],
body.single .entry-content iframe[src*="youtu.be"],
body.page .entry-content iframe[src*="youtube.com"],
body.page .entry-content iframe[src*="youtube-nocookie.com"],
body.page .entry-content iframe[src*="youtu.be"] {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Vimeo 固有の組み合わせに対して特異性を上げて確実に全幅化する（左右の余白を完全に解消する）. */
body.single .entry-content figure.wp-block-embed.wp-block-embed-vimeo,
body.single .entry-content figure.wp-block-embed.is-type-video.is-provider-vimeo {
  margin-left: 0 !important; /* 中央寄せの auto を打ち消す. */
  margin-right: 0 !important; /* 右端の空白を残さない. */
  padding-left: 0 !important; /* 予期せぬ内側余白を除去. */
  padding-right: 0 !important; /* 予期せぬ内側余白を除去. */
  width: 100% !important; /* 本文コンテナいっぱいに広げる. */
  max-width: none !important; /* 固定/上限幅を撤廃. */
}

body.page .entry-content figure.wp-block-embed.wp-block-embed-vimeo,
body.page .entry-content figure.wp-block-embed.is-type-video.is-provider-vimeo {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.single .entry-content figure.wp-block-embed.wp-block-embed-vimeo > .wp-block-embed__wrapper,
body.single .entry-content figure.wp-block-embed.is-type-video.is-provider-vimeo > .wp-block-embed__wrapper {
  width: 100% !important; /* ラッパーも全幅にする. */
  max-width: none !important; /* 固定/上限幅を撤廃. */
}

body.page .entry-content figure.wp-block-embed.wp-block-embed-vimeo > .wp-block-embed__wrapper,
body.page .entry-content figure.wp-block-embed.is-type-video.is-provider-vimeo > .wp-block-embed__wrapper {
  width: 100% !important;
  max-width: none !important;
}

body.single .entry-content figure.wp-block-embed.wp-block-embed-vimeo iframe,
body.single .entry-content figure.wp-block-embed.is-type-video.is-provider-vimeo iframe {
  width: 100% !important; /* iframe 自体も全幅にする. */
  max-width: 100% !important; /* 上限を本文幅に制限. */
  display: block; /* インライン間隙対策. */
}

body.page .entry-content figure.wp-block-embed.wp-block-embed-vimeo iframe,
body.page .entry-content figure.wp-block-embed.is-type-video.is-provider-vimeo iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* YouTube oEmbed: 終了時のサムネ復帰用オーバーレイ */
/* YouTube oEmbed 拡張用のスタイルは使用しない（WPデフォルトに準拠）. */