@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* ================================
   共通レイアウト変数（ヘッダーかぶり防止）
   ================================ */
:root{
  --header-h: 72px;      /* JSで上書き */
  --adminbar-h: 0px;     /* JSで上書き */
  --safe-pad: 8px;       /* ← 10px → 8px に減らす（全体の上余白を少し縮める） */
  --header-pad: calc(var(--header-h) + var(--adminbar-h) + env(safe-area-inset-top, 0px) + var(--safe-pad));
}

@media (max-width: 767px){
  :root{ --safe-pad: 10px; } /* ← モバイルも 12px → 10px に */
}

/* 本文の開始位置とアンカーの被り防止 */
body{ padding-top: var(--header-pad); }
html{ scroll-padding-top: var(--header-pad); }
.elementor-section, [id]{ scroll-margin-top: var(--header-pad); }

/* ページ全体の横はみ出し抑止（余白の元を断つ） */
html, body{ overflow-x: hidden; }

/* ================================
   ヘッダー（Elementorセクション data-id=28f5a9b）
   固定時の幅・spacer無効化・安定化
   ================================ */
.elementor-element-28f5a9b.elementor-sticky--active{
  position: fixed; top: 0; left: 0; right: 0;
  width: 100% !important;
  box-sizing: border-box;
  z-index: 9999;
}

/* Elementor が挿入する spacer による押し下げを無効化（保険で両方指定） */
.elementor-element-28f5a9b.elementor-sticky--active + .elementor-sticky__spacer,
.elementor-element-28f5a9b + .elementor-sticky__spacer{
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* sticky のエフェクト由来のズレを無効化 */
.elementor-element-28f5a9b.elementor-sticky--effects{
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* ヘッダー内の折返し/押し出し対策 */
.elementor-element-28f5a9b .elementor-container{ flex-wrap: nowrap; align-items: center; }
.elementor-element-28f5a9b .elementor-top-column{ min-width: 0; }
.elementor-element-28f5a9b .elementor-widget-image img{ display: block; max-width: 100%; height: auto; }

/* メニューの横スクロールが下層に影響しないように */
.elementor-element-28f5a9b .ha-navigation-menu-wrapper,
.elementor-element-28f5a9b nav.ha-nav-menu,
.elementor-element-28f5a9b .menu{
  overflow-x: hidden;
  white-space: normal;
}

/* ================================
   ヒーロー（背景動画）セクション #main-bg
   ヘッダー分だけ必ず下げ、初期高さを予約
   ================================ */
#main-bg{
  margin-top: calc(var(--header-pad) - 4px);
}

/* Elementorの動画ラッパーの高さ予約：
   実動画が 16:9 以外なら、aspect-ratio を実比率に変更してください */
#main-bg .elementor-wrapper{ aspect-ratio: 1/ 1; }

@media (max-width: 767px){
  /* 比率が不明/変動する場合の保険：最低高さ */
  #main-bg .elementor-wrapper{ min-height: 48vh; }
}

/* 動画描画の安定化 */
#main-bg video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================
   問題画像（data-id=4159dee）高さ予約
   ================================ */
.elementor-element-4159dee{ min-width: 0; }
.elementor-element-4159dee img{
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 画像が正方形でない場合は実比率に変更 */
}

/* ================================
   必要に応じて調整できるレスポンシブの雛形
   （サイト固有の追加調整はここに足してください）
   ================================ */
@media screen and (max-width: 1023px){
  /* 例：タブレット調整 */
}
@media screen and (max-width: 834px){
  /* 例：小タブレット調整 */
}
@media screen and (max-width: 480px){
  /* 例：スマホ調整 */
}
/* === 共通：ヘッダー分だけ下げる量（微調整は --safe-pad） === */
:root{
  --header-h: 72px;        /* ヘッダー想定高さ（足りなければここを+）*/
  --safe-pad: 8px;         /* 安全マージン。被るなら 10〜12px に */
  --header-pad: calc(var(--header-h) + var(--safe-pad));
}

/* === 各ページの「動画を含むファーストセクション」をまとめて下げる ===
   :has() が使える環境で広く効きます（最新iOS/Chrome/Safari/Edge等） */
.elementor-top-section:has(.elementor-widget-video){
  margin-top: var(--header-pad) !important;
  scroll-margin-top: var(--header-pad); /* アンカー飛びの被り防止 */
}

/* （任意の微調整）
   “少し下がりすぎ”なら 2〜4px だけ詰める */
.elementor-top-section:has(.elementor-widget-video){
  margin-top: calc(var(--header-pad) - 2px) !important;  /* -2px を -0〜-6pxで調整 */
}

/* モバイルだけもう少し詰めたい場合（必要なら） */
/*
@media (max-width: 767px){
  :root{ --safe-pad: 10px; }  // 逆にまだ被るなら 12px へ
  .elementor-top-section:has(.elementor-widget-video){
    margin-top: calc(var(--header-pad) - 2px) !important;
  }
}
*/