@charset "UTF-8";
/*!
 * Responsive Embed (YouTube / Vimeo / oEmbed)
 * Startups theme customization  -  v3
 *
 * 本文・Elementor・WPBakery のいずれに埋め込まれた動画でも
 * 100% 幅・16:9 で表示する。
 *
 * v1 はコンテナ（.entry-content 等）にスコープしていたため
 * Elementor ウィジェット内の埋め込みに当たらなかった。
 * v2 は iframe の src で直接マッチさせ、テーマ既存の
 * ポートフォリオ／スライダー／ライトボックス用 iframe だけを
 * 明示的に除外する方式に変更している。
 */

/* --------------------------------------------------------------
 * 1. 汎用ルール：YouTube / Vimeo の iframe を 100% 幅・16:9 に
 * ------------------------------------------------------------ */
iframe[src*="youtube.com/embed"],
iframe[src*="youtube-nocookie.com/embed"],
iframe[src*="player.vimeo.com/video"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* aspect-ratio 非対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 16 / 9) {
  iframe[src*="youtube.com/embed"],
  iframe[src*="youtube-nocookie.com/embed"],
  iframe[src*="player.vimeo.com/video"] {
    height: 56.25vw !important;
    max-height: 100vh;
  }
}

/* --------------------------------------------------------------
 * 2. 除外：テーマが自前で比率を管理している iframe を元に戻す
 *    （ポートフォリオ、ブログカード、スライダー、ライトボックス、
 *      Elementor / WPBakery の動画ウィジェット）
 *    これらの親は position: relative + padding-bottom で比率を
 *    作っているので、子 iframe は 100%/100% が正しい。
 * ------------------------------------------------------------ */
.video-holder iframe,
.image-holder iframe,
.clb-video-popup iframe,
.project-lightbox-gallery iframe,
.project-slider iframe,
.clb-slider-stage iframe,
.map-color iframe,
.wpb_video_wrapper iframe,
.elementor-fit-aspect-ratio iframe,
.elementor-widget-video iframe,
.elementor-video-container iframe,
.elementor-lightbox iframe,
.swiper iframe {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

/* --------------------------------------------------------------
 * 3. 親コンテナ側の横幅を確保
 * ------------------------------------------------------------ */
.wp-block-embed,
.wp-block-embed .wp-block-embed__wrapper,
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-html .elementor-widget-container,
.elementor-widget-shortcode .elementor-widget-container,
.wpb_text_column .wpb_wrapper {
  width: 100%;
  max-width: 100%;
}

/* ブロックエディタの埋め込み：コアの比率ラッパーを自前で再定義
   （wp-block-library が読み込まれない／上書きされる環境の保険） */
.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
  position: relative;
  display: block;
  width: 100%;
}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before { padding-top: 42.85%; }
.wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before { padding-top: 50%; }
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before { padding-top: 56.25%; }
.wp-block-embed.wp-embed-aspect-4-3  .wp-block-embed__wrapper::before { padding-top: 75%; }
.wp-block-embed.wp-embed-aspect-1-1  .wp-block-embed__wrapper::before { padding-top: 100%; }
.wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper::before { padding-top: 177.77%; }

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

/* 親要素を無条件に広げる（クラス名に依存しない保険）
   テーマが自前で比率を管理しているホルダーは除外する */
p:has(> iframe[src*="youtube.com/embed"]),
figure:not(.video-holder):not(.image-holder):has(> iframe[src*="youtube.com/embed"]),
div:not(.video-holder):not(.image-holder):not(.wpb_video_wrapper):not(.elementor-fit-aspect-ratio):not(.elementor-video-container):has(> iframe[src*="youtube.com/embed"]),
.elementor-widget-container:has(iframe[src*="youtube.com/embed"]),
.elementor-widget-text-editor:has(iframe[src*="youtube.com/embed"]) {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------------------------
 * 4. WPBakery Video Player 要素の比率ラッパー
 * ------------------------------------------------------------ */
.wpb_video_widget .wpb_wrapper .wpb_video_wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

.wpb_video_widget .wpb_wrapper .wpb_video_wrapper iframe,
.wpb_video_widget .wpb_wrapper .wpb_video_wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

/* --------------------------------------------------------------
 * 5. はみ出しによる横スクロール防止
 * ------------------------------------------------------------ */
.entry-content,
.wp-block-post-content {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  .entry-content,
  .wp-block-post-content {
    overflow-x: hidden;
  }
}

/* --------------------------------------------------------------
 * 6. 画面幅いっぱいに広げたい場合の任意クラス
 *    ブロック／ウィジェットの「追加CSSクラス」に -fullbleed を指定
 * ------------------------------------------------------------ */
@media (max-width: 767px) {
  .-fullbleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}