/* =========================================================
   Hero / Slider（右テキストのみ・SVGマスク適用）— 完全差し替え
   ========================================================= */

/* ラッパー：左=スライダー / 右=テキスト */
.hero-slider-wrapper{
  display: grid;
  grid-template-columns: minmax(0,1fr) 260px;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  background: #fff;
  overflow: visible;
  min-height: 520px;
  margin: 0 auto;
  padding: 20px;
}

/* レスポンシブ：幅が狭い時は1カラムに（自然に上下に並ぶ） */
@media (max-width: 980px){
  .hero-slider-wrapper{
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(12px, 3vw, 28px);
  }
}

/* スライダー本体 */
.hero-slider{
  grid-column: 1;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;                         /* PCは 16:9 基準 */
  min-height: clamp(320px, 58vw, 780px);         /* モバイルで過剰に高くならないよう下限を下げ気味に */
  overflow: hidden;

  /* —— SVGマスク（PC/横向き） —— */
  -webkit-mask-image: url("/wp-content/uploads/2025/09/tophaikie.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: contain;
          mask-image: url("/wp-content/uploads/2025/09/tophaikie.svg");
          mask-repeat: no-repeat;
          mask-position: 50% 50%;
          mask-size: contain;

  /* 黒帯の原因を根絶：背景は常に透過（黒にしない） */
  background: transparent;

  /* 影が不要なら以下をコメントアウト */
  /* box-shadow: 0 18px 40px rgba(0,0,0,.10); */

  /* フォールバック：マスク非対応でも角丸で見栄え維持 */
  border-radius: 50px;
}

/* Swiper領域を“本当に”いっぱいにする（高さ伝播） */
.hero-slider .swiper{ width:100%; height:100%; }
.hero-slider .swiper-wrapper{ width:100%; height:100%; }
.hero-slider .swiper-slide{ width:100%; height:100%; }

/* ページネーション位置 */
.hero-slider .swiper-pagination{
  bottom: clamp(8px, 1.2vw, 14px) !important;
}

/* スライド画像 */
.hero-image{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: 50% 40%;  /* 顔が切れにくいよう上寄せ（PC想定） */
}

/* -----------------------------------------
   スマホ縦：黒帯対策としてマスクを外す（最も確実）
   ----------------------------------------- */
@media screen and (max-width: 820px) and (orientation: portrait){
  .hero-slider{
    -webkit-mask: none !important;
            mask: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;

    aspect-ratio: auto;          /* 16:9固定を外す */
    min-height: 60vw;            /* 56–70vw で微調整可 */
    border-radius: 28px;         /* 角丸。不要なら削除 */
    background: transparent !important;
  }
  .hero-image{
    object-position: 50% 50%;    /* 中央基準で見切れを抑える */
  }

  /* 念のため、疑似要素の塗りつぶしも無効化 */
  .hero-slider::before,
  .hero-slider::after{
    content: none !important;
    background: transparent !important;
  }
}

/* 横向き端末（タブレット等）はPC同等＝マスク有効のまま */