:root{
  --sec-subtitle-size: clamp(14px, 1.2vw, 16px);
}

/* =========================================================
   トップスライドショー
   ========================================================= */

/* ===== 応急対応：スライドショーに意図しない枠線/アウトラインが出る問題 =====
   Some environments add link focus outlines or inherited borders that look like a frame.
   スライドショーのメディア要素とオーバーレイリンクの枠線を明示的にリセットします。 */

.c-top-slideshow__viewport,
.c-top-slideshow__track,
.c-top-slideshow__slide,
.c-top-slideshow__slide img,
.c-top-slideshow__slide video,
.c-top-slideshow__slide iframe,
.c-top-slideshow__link{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.c-top-slideshow__link{ -webkit-tap-highlight-color: transparent; }


.c-top-slideshow{
  position: relative;
  overflow: hidden;
}

/* 画像の表示方法（切り抜き/全体表示）は、PC/タブレット/SPで同じカスタマイザー設定を使う。 */
.c-top-slideshow[data-image-fit="contain"]{ --ts-object-fit: contain; }
.c-top-slideshow[data-image-fit="cover"]{ --ts-object-fit: cover; }

.c-top-slideshow__viewport{
  width: 100%;
  position: relative; /* ナビ用の z-index 重なりコンテキスト */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;

  overflow: hidden;
}

/* 高さ制御 */
.c-top-slideshow[data-height-mode="vh"] .c-top-slideshow__viewport,
.c-top-slideshow[data-height-mode="fixed"] .c-top-slideshow__viewport{
  height: var(--ts-height, 60vh);
}
.c-top-slideshow[data-height-mode="ratio"] .c-top-slideshow__viewport{
  aspect-ratio: var(--ts-aspect, 16/9);
}
.c-top-slideshow[data-height-mode="ratio"][data-ratio-max-height="1"] .c-top-slideshow__viewport{
  max-height: var(--ts-ratio-max-height, 70vh);
  max-width: min(100%, calc(var(--ts-ratio-max-height, 70vh) * var(--ts-aspect-w, 16) / var(--ts-aspect-h, 9)));
  margin-left: auto;
  margin-right: auto;
}

/* タブレット：高さ/比率/画像フィットもカスタマイザー設定を優先する
   820px 前後で画像が見切れる原因になりやすい固定 min-height は入れない。
   画像の切り抜き有無は top_slideshow_image_fit の設定に一本化する。 */
@media (min-width: 769px) and (max-width: 1024px){
  .c-top-slideshow[data-height-mode="vh"] .c-top-slideshow__viewport,
  .c-top-slideshow[data-height-mode="fixed"] .c-top-slideshow__viewport{
    height: var(--ts-height, 60vh);
  }
  .c-top-slideshow[data-height-mode="ratio"] .c-top-slideshow__viewport{
    aspect-ratio: var(--ts-aspect, 16/9);
  }
  .c-top-slideshow[data-height-mode="ratio"][data-ratio-max-height="1"] .c-top-slideshow__viewport{
    max-height: var(--ts-ratio-max-height, 70vh);
    max-width: min(100%, calc(var(--ts-ratio-max-height, 70vh) * var(--ts-aspect-w, 16) / var(--ts-aspect-h, 9)));
    margin-left: auto;
    margin-right: auto;
  }

  .c-top-slideshow[data-image-fit="contain"] .c-top-slideshow__slide > img,
  .c-top-slideshow[data-image-fit="contain"] .c-top-slideshow__mediaSpFallback img{
    object-fit: contain !important;
    object-position: center center;
  }

  .c-top-slideshow[data-image-fit="cover"] .c-top-slideshow__slide > img,
  .c-top-slideshow[data-image-fit="cover"] .c-top-slideshow__mediaSpFallback img{
    object-fit: cover;
    object-position: center center;
  }
}

/* 画像 / 動画 */
.c-top-slideshow__slide img,
.c-top-slideshow__slide video,
.c-top-slideshow__slide iframe{
  width: 100%;
  height: 100%;
  object-fit: var(--ts-object-fit, cover);
  object-position: center center;
  display: block;
}

/* iframe は object-fit が効かないため、従来どおり全面表示にする */
.c-top-slideshow__slide iframe{
  object-fit: initial;
}

/* ===== 応急対応：MP4 <video> の黒い1px境界線/継ぎ目対策 =====
   Some environments render a black 1px line at the edge of <video> (subpixel rounding / decoder output).
   拡大ではなく、クリップされたスライド内で動画を1pxだけはみ出させて対策する。 */
.c-top-slideshow__slide{
  overflow: hidden; /* はみ出し部分を確実にクリップする */
}
.c-top-slideshow__slide video{
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}

/* トラックとスライドの基本設定 */
.c-top-slideshow__track{ position: relative; width: 100%; height: 100%; }
.c-top-slideshow__slide{ width: 100%; height: 100%; position: relative; overflow: hidden; isolation: isolate; }

/* クリック可能レイヤー */
.c-top-slideshow__link{ position: absolute; inset: 0; z-index: 1; display: block; }
.c-top-slideshow__slide > img,
.c-top-slideshow__slide > video,
.c-top-slideshow__slide > iframe,
.c-top-slideshow__slide > .c-top-slideshow__youtube,
.c-top-slideshow__slide > .c-top-slideshow__video,
.c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback{ position: absolute; inset: 0; z-index: 0; }
.c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback img{ width: 100%; height: 100%; }

/* カーソル：有効なリンクがあるスライドだけ pointer にする */
.c-top-slideshow__viewport{ cursor: default; }
.c-top-slideshow__slide.has-link{ cursor: pointer; }
.c-top-slideshow__slide.has-link .c-top-slideshow__link{ cursor: pointer; }

/* SP時の挙動：オーバーレイリンクを無効化 */
@media (max-width: 768px){
  .c-top-slideshow__link.is-sp-disabled{ pointer-events: none; }
}


/* SP時の挙動：画像フォールバック（有効時はモバイルで画像だけ表示）
   メモ：環境差分のCSS上書きを避けるため、詳細度高め + !important を使用する。 */
.c-top-slideshow__slide .c-top-slideshow__mediaSpFallback{
  display: none !important;
}
.c-top-slideshow__mediaSpFallback img{
  width: 100%;
  height: 100%;
  object-fit: var(--ts-object-fit, cover);
  object-position: center center;
  display: block;
}

@media (max-width: 768px){
  .c-top-slideshow__slide.has-sp-fallback .c-top-slideshow__mediaSpFallback{
    display: block !important;
  }
  /* フォールバック有効時は、モバイルで動画 / YouTube を非表示にする */
  .c-top-slideshow__slide.has-sp-fallback video,
  .c-top-slideshow__slide.has-sp-fallback iframe,
  .c-top-slideshow__slide.has-sp-fallback .c-top-slideshow__youtube,
  .c-top-slideshow__slide.has-sp-fallback .c-top-slideshow__video{
    display: none !important;
  }

  /* コピーを下に出す場合も ratio モードの挙動をそろえる */
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__mediaSpFallback img{
    height: auto;
    aspect-ratio: var(--ts-aspect, 16/9);
    object-fit: var(--ts-object-fit, contain);
  }
}


@media (max-width: 768px){
  .c-top-slideshow__slide.has-sp-fallback .c-top-slideshow__mediaSpFallback{
    display: block;
  }
  /* フォールバック有効時は、モバイルで動画 / YouTube を非表示にする */
  .c-top-slideshow__slide.has-sp-fallback video,
  .c-top-slideshow__slide.has-sp-fallback iframe{
    display: none;
  }

  /* コピーを下に出す場合も ratio モードの挙動をそろえる */
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__mediaSpFallback img{
    height: auto;
    aspect-ratio: var(--ts-aspect, 16/9);
    object-fit: var(--ts-object-fit, contain);
  }
}


/* コピーレイヤー */
.c-top-slideshow__copy{ z-index: 5; pointer-events: none; }
.c-top-slideshow__copy a,
.c-top-slideshow__copy button{ pointer-events: auto; }

/* 再生優先：再生/一時停止を切り替える透明オーバーレイ（YouTube/動画）
   - クロスオリジンのiframe内クリックは親要素へ伝わらないため必要。
   - メディアより上（z=2）、コピーより下（z=3）に配置する。 */
.c-top-slideshow__playToggle{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.c-top-slideshow__slide.is-play-priority-paused .c-top-slideshow__playToggle{
  cursor: pointer;
}

.c-top-slideshow__ctaWrap{ margin-top: 14px; }
.c-top-slideshow__cta{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ts-cta-bg, rgba(255,255,255,.92));
  color: #111;
  text-decoration: none;
  font-weight: 700;
}
.c-top-slideshow__cta:hover{ opacity: .92; }

.c-top-slideshow__nav{ z-index: 50; }

/* エフェクト：フェード */
.c-top-slideshow[data-effect="fade"] .c-top-slideshow__track{ height: 100%; }
.c-top-slideshow[data-effect="fade"] .c-top-slideshow__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.c-top-slideshow[data-effect="fade"] .c-top-slideshow__slide.is-active{
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* エフェクト：スライド */
.c-top-slideshow[data-effect="slide"] .c-top-slideshow__track{
  display: flex;
  height: 100%;
  transform: translateX(0%);
  transition: transform .7s ease;
}
.c-top-slideshow[data-effect="slide"] .c-top-slideshow__slide{
  flex: 0 0 100%;
}

/* コピーのオーバーレイ */
.c-top-slideshow__copy{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 2rem;
  justify-content: center;
  text-align: center;
}

.c-top-slideshow__copyInner,
.c-top-slideshow__main,
.c-top-slideshow__sub,
.c-top-slideshow__ctaWrap,
.c-top-slideshow__cta{
  position: relative;
  z-index: 6;
}

/* スライドごとの配置
   既存の center / left / right は挙動を維持しつつ、9分割配置へ拡張。
   YouTubeの中央UI、人物写真の顔、CTA位置などをスライドごとに避けられるようにする。 */
.c-top-slideshow__slide[data-align="top-left"] .c-top-slideshow__copy{ justify-content: flex-start; align-items: flex-start; text-align: left; }
.c-top-slideshow__slide[data-align="top"] .c-top-slideshow__copy{ justify-content: flex-start; align-items: center; text-align: center; }
.c-top-slideshow__slide[data-align="top-right"] .c-top-slideshow__copy{ justify-content: flex-start; align-items: flex-end; text-align: right; }
.c-top-slideshow__slide[data-align="left"] .c-top-slideshow__copy{ justify-content: center; align-items: flex-start; text-align: left; }
.c-top-slideshow__slide[data-align="center"] .c-top-slideshow__copy{ justify-content: center; align-items: center; text-align: center; }
.c-top-slideshow__slide[data-align="right"] .c-top-slideshow__copy{ justify-content: center; align-items: flex-end; text-align: right; }
.c-top-slideshow__slide[data-align="bottom-left"] .c-top-slideshow__copy{ justify-content: flex-end; align-items: flex-start; text-align: left; }
.c-top-slideshow__slide[data-align="bottom"] .c-top-slideshow__copy{ justify-content: flex-end; align-items: center; text-align: center; }
.c-top-slideshow__slide[data-align="bottom-right"] .c-top-slideshow__copy{ justify-content: flex-end; align-items: flex-end; text-align: right; }

.c-top-slideshow__main{ margin: 0; }
.c-top-slideshow__sub{ margin: 0; }

/* SP：画像の下にコピーを表示 */
@media (max-width: 768px){
  /* モバイルでは少し余白を持たせる（ヘッダー直下で詰まりがち） */
  .c-top-slideshow{
    padding-top: 12px;
  }

  /* モバイルでも画像の表示方法（切り抜き/全体表示）設定を優先する。 */
  .c-top-slideshow__slide img{
    object-fit: var(--ts-object-fit, contain);
    object-position: center;
  }

  /* SP：画像の下にコピーを表示 */
  /* 次のセクションへの重なりを防ぐため overflow hidden は維持する。
     （下で viewport の aspect-ratio を外すことでコピーの欠けは避ける） */
  .c-top-slideshow[data-sp-copy="below"]{ overflow: hidden; }

  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__viewport,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__track,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide{
    height: auto;
  }

  /* カラムレイアウトにして、コピーをメディア下の通常フローとして扱う */
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide{
    display: flex;
    flex-direction: column;
  }

  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__copy{
    position: static;
    padding: 1rem 1.25rem;
  }
  /* SPでコピーが見た目上空の場合（例：SPテキスト非表示）は、空白を防ぐためコピー枠を畳む */
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__copy.is-empty{
    display: none !important;
    padding: 0 !important;
  }

  /* SP「コピー下」: video はメタデータ読み込み前に高さ0になりやすい（特に拾ってきたMP4）ため、
     aspect-ratio を与えて常に一定の高さを確保する。 */
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > img,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > video,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > iframe,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > .c-top-slideshow__youtube,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback{
    /* IMPORTANT:
       Desktop側ではメディアに position:absolute を使っているため、
       SP「コピー下」では通常フローに戻さないと画像だけ高さ計算に参加せず、
       「画像が出ない」「文言が画像の下に来ない」症状が起きる。 */
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: auto !important;
    display: block !important;
    flex: 0 0 auto;
  }
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > img,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > video,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > iframe,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > .c-top-slideshow__youtube,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback img{
    aspect-ratio: var(--ts-aspect, 16/9);
  }
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide > video{
    object-fit: cover;
  }


  /* フェードモードではスライドが絶対配置のため、レイアウトの高さに反映されない。
     SPの「コピー下」モードでは active スライドの高さを基準にし、
     次セクションが上に詰まったり重なったりしないようにする。 */
  .c-top-slideshow[data-sp-copy="below"][data-effect="fade"] .c-top-slideshow__track{
    height: auto;
  }
  .c-top-slideshow[data-sp-copy="below"][data-effect="fade"] .c-top-slideshow__slide{
    position: relative;
    inset: auto;
    opacity: 1;
    transition: none;
    display: none;
  }
  .c-top-slideshow[data-sp-copy="below"][data-effect="fade"] .c-top-slideshow__slide.is-active{
    display: flex;
  }

  /* 高さモードが ratio の場合、viewport に aspect-ratio を固定しない。
     代わりにメディア要素へ aspect-ratio を当て、選択した比率を保ちながら、
     下配置コピーが欠けないようにする。 */
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__viewport{
    aspect-ratio: auto;
  }

  /* フェード ratio の viewport 維持：
     フェード表示はスライドが重なるため、SP「コピー下」でも viewport 側の比率を維持する */
  .c-top-slideshow[data-effect="fade"][data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__viewport{
    aspect-ratio: var(--ts-aspect, 16/9);
  }

  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide > img,
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide > video,
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide > iframe,
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide > .c-top-slideshow__youtube,
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback,
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback img{
    width: 100%;
    height: auto;
    aspect-ratio: var(--ts-aspect, 16/9);
    /* SPでも『画像の表示方法』設定（cover / contain）を尊重する */
    object-fit: var(--ts-object-fit, contain);
    display: block;
  }

  /* 小さい画面では内側コピーを横幅いっぱいにする */
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__copyInner{
    width: 100%;
    max-width: 100%;
  }
}


/* ナビ：矢印とドット */
.c-top-slideshow__nav{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  pointer-events: none;
}
.c-top-slideshow__arrow,
.c-top-slideshow__dot{ pointer-events: auto; }

.c-top-slideshow__arrow{
  border: 0;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.75);
  cursor: pointer;
}
.c-top-slideshow__arrow span{
  font-size: 28px;
  line-height: 1;
}

.c-top-slideshow__dots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex: 1 1 auto;
}
.c-top-slideshow__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.c-top-slideshow__dot.is-active{ background: rgba(255,255,255,.95); }

@media (max-width: 768px){
  .c-top-slideshow__nav{ padding: .75rem; }
  .c-top-slideshow__arrow{ width: 40px; height: 40px; }
}

/* ===== ナビ/スワイプの強化 ===== */
.c-top-slideshow__nav--inline{ display: none; }
.c-top-slideshow__nav--inline .c-top-slideshow__dots{ justify-content: center; }

@media (max-width: 768px){
  .c-top-slideshow__arrow{ display: none; }

  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__nav--inline{
    display: block;
    position: static;
    padding: .5rem 0;
  }
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__nav--overlay{ display: none; }

  .c-top-slideshow[data-sp-copy="overlay"] .c-top-slideshow__nav--overlay{ justify-content: center; }
}

/* スライドショーの文字色 */
.c-top-slideshow__main{ color: var(--ts-main-color, #fff); }
.c-top-slideshow__sub{ color: var(--ts-sub-color, #fff); }


.c-top-slideshow__copy{
  opacity: 1;
  visibility: visible;
}
.c-top-slideshow__main,
.c-top-slideshow__sub{
  opacity: 1;
  visibility: visible;
}
/* ===== テキスト背景とシャドウ ===== */
.c-top-slideshow__copyInner{
  display: inline-block;
  max-width: min(100%, var(--top-slideshow-copy-maxw, 720px));
  padding: .75rem 1rem;
  border-radius: 12px;
  background: none;
}

/* スライドごとのCSS変数で背景タイプを制御 */
.c-top-slideshow__slide{ --ts-bg-type: none; --ts-bg: rgba(0,0,0,.35); --ts-shadow: 1; }

/* スライドごとのCSS変数で背景タイプを制御
   メモ：[style*="..."] はブラウザ/環境によってインラインstyle文字列が正規化されるため依存しない。
   安定した data 属性を優先し、後方互換のため旧セレクタも残す。 */
.c-top-slideshow__slide[data-bg-type="box"] .c-top-slideshow__copyInner,
.c-top-slideshow__slide[style*="--ts-bg-type:box"] .c-top-slideshow__copyInner{ background: var(--ts-bg); }

.c-top-slideshow__slide[data-bg-type="gradient"] .c-top-slideshow__copyInner,
.c-top-slideshow__slide[style*="--ts-bg-type:gradient"] .c-top-slideshow__copyInner{
  background: linear-gradient(90deg, var(--ts-bg), rgba(0,0,0,0));
}

/* テキストシャドウ切り替え */
.c-top-slideshow__slide[data-shadow="1"] .c-top-slideshow__copyInner,
.c-top-slideshow__slide.has-text-shadow .c-top-slideshow__copyInner{
  filter: var(--ts-copy-drop-shadow, drop-shadow(0 6px 18px rgba(0,0,0,.28)));
}

.c-top-slideshow__slide[data-shadow="1"] .c-top-slideshow__main,
.c-top-slideshow__slide[data-shadow="1"] .c-top-slideshow__sub,
.c-top-slideshow__slide.has-text-shadow .c-top-slideshow__main,
.c-top-slideshow__slide.has-text-shadow .c-top-slideshow__sub,
.c-top-slideshow__slide[style*="--ts-shadow:1"] .c-top-slideshow__main,
.c-top-slideshow__slide[style*="--ts-shadow:1"] .c-top-slideshow__sub{ text-shadow: var(--ts-text-shadow, 0 2px 10px rgba(0,0,0,.42)); }

.c-top-slideshow__slide[data-shadow="1"] .c-top-slideshow__cta,
.c-top-slideshow__slide.has-text-shadow .c-top-slideshow__cta{ box-shadow: var(--ts-cta-shadow, 0 8px 22px rgba(0,0,0,.24)) !important; }

.c-top-slideshow__slide[data-shadow="0"] .c-top-slideshow__copyInner,
.c-top-slideshow__slide.no-text-shadow .c-top-slideshow__copyInner{ filter: none; }

.c-top-slideshow__slide[data-shadow="0"] .c-top-slideshow__main,
.c-top-slideshow__slide[data-shadow="0"] .c-top-slideshow__sub,
.c-top-slideshow__slide.no-text-shadow .c-top-slideshow__main,
.c-top-slideshow__slide.no-text-shadow .c-top-slideshow__sub,
.c-top-slideshow__slide[style*="--ts-shadow:0"] .c-top-slideshow__main,
.c-top-slideshow__slide[style*="--ts-shadow:0"] .c-top-slideshow__sub{ text-shadow: none; }

.c-top-slideshow__slide[data-shadow="0"] .c-top-slideshow__cta,
.c-top-slideshow__slide.no-text-shadow .c-top-slideshow__cta{ box-shadow: none !important; }

@media (max-width: 768px){
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__copyInner{
    width: 100%;
    max-width: 100%;
  }
}

/* ===== 角丸 / 余白 / フォントサイズ ===== */
.c-top-slideshow__slide{
  --ts-radius: 12px;
  --ts-pad-y: 12px;
  --ts-pad-x: 16px;
  --ts-main-size: 32px;
  --ts-sub-size: 16px;
}

.c-top-slideshow__copyInner{
  border-radius: var(--ts-radius);
  padding: var(--ts-pad-y) var(--ts-pad-x);
}
.c-top-slideshow__main{ font-size: var(--ts-main-size) !important; line-height: 1.25; }
.c-top-slideshow__sub{ font-size: var(--ts-sub-size); line-height: 1.6; }

/* ===== 画像フィット切り替え ===== */
.c-top-slideshow[data-image-fit="contain"] .c-top-slideshow__slide > img,
.c-top-slideshow[data-image-fit="contain"] .c-top-slideshow__mediaSpFallback img{
  object-fit: contain !important;
  object-position: center center;
  background: transparent;
}
.c-top-slideshow[data-image-fit="cover"] .c-top-slideshow__slide > img,
.c-top-slideshow[data-image-fit="cover"] .c-top-slideshow__mediaSpFallback img{
  object-fit: cover;
  object-position: center center;
}
.c-secSubtitle,
.front-about__subtitle,
.front-service__subtitle,
.front-reasons__subtitle,
.front-voice__subtitle,
.front-cta__subtitle {
  font-size: var(--sec-subtitle-size);
  line-height: 1.6;
}

.front-about__role,
.front-about__shoulder {
}


/* 高さがautoになるケースでも追従できるように、メディア要素と同じスタッキングで扱う */


/* ===== YouTube loading UI（案1＋） =====
   YouTubeの読み込み中にテキストだけ先に出る違和感を抑えるため、
   読み込み完了までローダーを表示し、テキスト（コピー）を遅延表示する */
.c-top-slideshow__slide.is-media-loading .c-top-slideshow__copy,
.c-top-slideshow__slide.is-media-loading .c-top-slideshow__caption,
.c-top-slideshow__slide.is-media-loading .c-top-slideshow__text{
  opacity: 0;
}

.c-top-slideshow__loader{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.c-top-slideshow__slide.is-media-loading .c-top-slideshow__loader{
  opacity: 1;
}

.c-top-slideshow__spinner{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,.95);
  animation: anchorSpin 1s linear infinite;
}

@keyframes anchorSpin{
  to{ transform: rotate(360deg); }
}

/* loader overlay anchor:
   ローダーを各スライド内で正しく重ねるため、スライドを基準にする */
.c-top-slideshow__slide{
  position: relative;
}


/* fade aspect-ratio override:
   フェード表示はスライドが重なるため、SP「コピー下」でも viewport の高さが潰れないよう
   aspect-ratio を維持する */
.c-top-slideshow[data-effect="fade"][data-sp-copy="below"] .c-top-slideshow__viewport{
  aspect-ratio: var(--ts-aspect, 16/9);
}



/* ===== 修正：SPコピー下 + 画像フォールバック + YouTube =====
   ratio モードでは、後続ルールが iframe/video を display:block !important で再表示し、
   モバイルでフォールバック画像と実メディアが両方出ることがある。
   SPフォールバック有効時は、実メディア/UIを強制的に非表示にする。 */
@media (max-width: 768px){
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > video,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > iframe,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > .c-top-slideshow__youtube,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > .c-top-slideshow__video,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > .c-top-slideshow__loader,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > .c-top-slideshow__playToggle,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > video,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > iframe,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > .c-top-slideshow__youtube,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > .c-top-slideshow__video,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > .c-top-slideshow__loader,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > .c-top-slideshow__playToggle{
    display: none !important;
  }

  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.has-sp-fallback > .c-top-slideshow__mediaSpFallback,
  .c-top-slideshow[data-sp-copy="below"] .c-top-slideshow__slide.is-sp-fallback-active > .c-top-slideshow__mediaSpFallback{
    display: block !important;
  }

  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide.has-sp-fallback > .c-top-slideshow__mediaSpFallback img,
  .c-top-slideshow[data-sp-copy="below"][data-height-mode="ratio"] .c-top-slideshow__slide.is-sp-fallback-active > .c-top-slideshow__mediaSpFallback img{
    width: 100%;
    height: auto;
    aspect-ratio: var(--ts-aspect, 16/9);
    object-fit: var(--ts-object-fit, contain);
    display: block !important;
  }
}

@media (max-width: 768px){
  /* SPスライドエフェクト：2枚目/3枚目以降でもメディアサイズを安定させる */
  .c-top-slideshow[data-sp-copy="below"][data-effect="slide"] .c-top-slideshow__viewport{
    height: auto !important;
  }
  .c-top-slideshow[data-sp-copy="below"][data-effect="slide"] .c-top-slideshow__track{
    align-items: flex-start;
  }
  .c-top-slideshow[data-sp-copy="below"][data-effect="slide"] .c-top-slideshow__slide > img,
  .c-top-slideshow[data-sp-copy="below"][data-effect="slide"] .c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback,
  .c-top-slideshow[data-sp-copy="below"][data-effect="slide"] .c-top-slideshow__slide > .c-top-slideshow__mediaSpFallback img{
    min-height: 1px;
  }
}

/* 2.8.43 SP: 9分割配置はPC/タブレット向け。スマホでは安全性を優先して中央固定にする。
   - overlay: メディア上のコピーを中央へ戻す
   - below: メディア下のコピーも中央揃えに戻す
   既存の data-sp-copy / 高さ制御 / 再生優先レイヤーには触れない。 */
@media (max-width: 768px){
  .c-top-slideshow__slide[data-align] .c-top-slideshow__copy{
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .c-top-slideshow__slide[data-align] .c-top-slideshow__copyInner{
    margin-left: auto;
    margin-right: auto;
  }
}