/* ------------トップページ------------ */



/* 上部のpadding消す */
/* ---------------------------------------------------------------------- */
.c-section.p-section-front-page-content {
    padding-top: 0 !important;
}



/* MVの動画実装 */
/* ---------------------------------------------------------------------- */
/* メイン動画の上を少しマスク（ヘッダーを見やすくする為） */
.xcs-mv-movie {
    position: relative;
    isolation: isolate;
    /* 擬似要素の重なりを安全にする */
}

.xcs-mv-movie::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    /* 動画より上に */
    pointer-events: none;

    /* 上だけ白く、下に向かって自然に消える */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.6) 18%,
        rgba(255, 255, 255, 0.25) 34%,
        rgba(255, 255, 255, 0) 55%
    );
}

.xcs-mv-movie video {
    position: relative;
    z-index: 1;
    display: block;
}


/* 動画うえの文字を前面に */
.xcs-zindex1000 {
    position: relative;
  z-index: 1000;
}



/* 3つのブロックのセクションの背景色を付ける */
/* ---------------------------------------------------------------------- */
.xcs-top .smb-section-break-the-grid__content {
    position: relative;
}

.xcs-top .smb-section-break-the-grid__content::before {
    content: '';
    position: absolute;
    inset: -50px;
    /* はみ出し量（丸背景を大きくしたい時） */
    border-radius: 9999px;
    /* 円に近い丸（正円にしたければ50%でもOK） */
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.6) 80%,
        rgba(255, 255, 255, 0) 100%
    );
    z-index: -1;
    /* 背面へ */
    pointer-events: none;
    /* クリック邪魔しない */
}

.xcs-top {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(255, 170, 70, 0.12),
            transparent 65%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 130, 30, 0.1),
            transparent 70%
        );
}

@media (max-width: 1023px) {
    .xcs-top .smb-section-break-the-grid__content {
        margin-bottom: -20px;
        max-width: 80%;
        margin-inline:auto;
    }
}


@media (max-width: 768px) {
    .xcs-top .smb-section-break-the-grid__figure{
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


@media (max-width: 500px) {
    .xcs-top .smb-section-break-the-grid__content {
        max-width: 100%;
    }
}

/* 3つのブロークングリッドの文字サイズ指定
タイトルはnowrap、文章は共通設定のpタグ相当に */
.xcs-nowrap h2{
    white-space: nowrap;
}

.xcs-nowrap div{
    font-size: clamp(1rem, 1.8vw, 1.25rem);;
}




/* =========================================
   動画上のメインコピー
========================================= */

/* セクション自体の高さ調整 */
.xcs-section-img {
  /* 必要に応じて調整 */
  min-height: clamp(150px, 20vw, 350px) !important;
  overflow: hidden;
}

/* セクション内の画像 */
.xcs-section-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 画像ブロックやカバー系にも高さを持たせたい場合 */
.xcs-section-img .wp-block-image,
.xcs-section-img .wp-block-image img,
.xcs-section-img .wp-block-cover,
.xcs-section-img .wp-block-cover__image-background {
  height: 100%;
}

/* マスク本体 */
.xcs-section-img img,
.xcs-section-img .wp-block-cover__image-background {
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 12%,
      rgba(0, 0, 0, 0.8) 18%,
      rgba(0, 0, 0, 0.8) 82%,
      rgba(0, 0, 0, 0.45) 88%,
      transparent 100%
    ),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 5%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.65) 95%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 12%,
      rgba(0, 0, 0, 0.8) 18%,
      rgba(0, 0, 0, 0.8) 82%,
      rgba(0, 0, 0, 0.45) 88%,
      transparent 100%
    ),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.65) 5%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.65) 95%,
      transparent 100%
    );
  mask-composite: intersect;
}


/* =========================================
   動画上のメインコピー
========================================= */