/* ========== 変数（JSが --card-w を上書き） ========== */
:root {
  --gap: 16px;      /* カード間ギャップ。必要なら変更 */
  --card-w: 240px;  /* 初期ダミー（JSで実寸が入る） */
}

/* ずれ回避 */
*, *::before, *::after { box-sizing: border-box; }

/* ========== コンテナ ========== */
.slide {
  position: relative;
  overflow: hidden;  /* 両端のはみ出しを隠す */
  width: 100%;
  margin-top: 24px;
}

/* ========== トラック（横スクロール本体） ========== */
/* 左右パディングで “半カード＋半ギャップ” を演出 */
.slide_img {
  display: flex;
  align-items: stretch;
  overflow-x: auto;                 /* ドラッグ/タッチで横移動 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: 0;                           /* ギャップは子の margin で作成 */
  padding-left:  calc(var(--card-w) / 2 + var(--gap) / 2);
  padding-right: calc(var(--card-w) / 2 + var(--gap) / 2);

  /* スクロールバー非表示（各ブラウザ） */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* 旧Edge/IE */
  scrollbar-gutter: auto;

  /* 操作性 */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.slide_img:active { cursor: grabbing; }

/* WebKit 系のスクロールバー完全非表示 */
.slide_img::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ========== カード ========== */
/* 幅は var(--card-w)、左右 margin の合算が常に 1*gap になる */
.slide_img > div {
  flex: 0 0 var(--card-w);
  margin: 0 calc(var(--gap) / 2);
  overflow: hidden;
  border-radius: 8px;
}

/* ========== 画像 ========== */
.slide_img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  /* 必要なら固定比率
     aspect-ratio: 16/9;
  */
}

/* ========== 矢印ボタン ========== */
.slide_arrow {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* ボタンのみクリック可 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.slide_arrow button {
  pointer-events: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
}

/* ========== フォーカス可視性 ========== */
#carousel:focus-visible {
  outline: 2px solid #1e90ff;
  outline-offset: 2px;
}
.slide_img a:focus-visible {
  outline: 2px solid #1e90ff;
  outline-offset: -2px;
}

/* ========== モーション配慮 ========== */
@media (prefers-reduced-motion: reduce) {
  .slide_img { scroll-behavior: auto; }
}

/* ========== （任意）モバイルだけギャップを少し詰めたい時 ========== */
@media (max-width: 768px) {
  :root { --gap: 12px; } 
  .slide {
  margin-bottom: 24px;
}

}
/* ===== スライダー矢印：SPで小さくする ===== */
@media (max-width: 768px) {
  /* ボタン自体の当たり判定を少し小さめに */
  .slide_arrow button {
    padding: 4px;
  }

  /* 矢印画像の実サイズを縮小 */
  .slide_arrow button img {
    width: 24px;
    height: auto;
  }

}

/* スライダー内の Instagram 埋め込み調整 */
@media (max-width: 768px) {
  /* blockquote 自体の幅・高さを制御 */
  #carousel-track .instagram-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;              /* Instagram が付ける 326px を殺す */
    max-height: 420px;                    /* 好きな上限値に調整してOK */
    margin: 0 auto 12px !important;
    overflow: hidden;                     /* 上限からはみ出た分は隠す or auto でスクロール */
  }

  /* 中に生成される iframe にも一応かけておく */
  #carousel-track .instagram-media iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5;                  /* IG っぽい縦長比率。好みで 1/1 や 16/9 に変更 */
    display: block;
  }
}


/* もっと小さい端末ではさらに縮めてもOK */
@media (max-width: 480px) {
  .slide_arrow button img {
    width: 20px;
  }
}

/* ====== スライド：見た目を安定させる ====== */
#carousel { position: relative; }

/* トラック内の各スライドカードを同寸に */
#carousel-track > div {
  /* 横幅はお好みで。横スクロール/カルーセルなら固定幅が安定 */
  inline-size: clamp(260px, 32vw, 420px);
  /* 縦横比を統一（16:9 推奨） */
  aspect-ratio: 16 / 9;
  /* 画像の下にキャプション <p> があるので、余白を用意 */
  display: flex;
  flex-direction: column;
}

/* 画像は“枠いっぱいに”トリミングして見せる */
#carousel-track img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;  /* 念のため明示 */
  object-fit: cover;     /* 画像の切り抜きで統一感を出す */
  border-radius: 12px;
  display: block;
}

/* ===== caption が消える問題の修正（上書き） ===== */

/* 1) “カード全体”の固定比率は外す（高さは内容に合わせる） */
#carousel-track > div { aspect-ratio: auto; }

/* 2) a の中を縦並びにして、画像の下に p を置けるようにする */
#carousel-track a { display: grid; grid-template-rows: auto auto; }

/* 3) 画像は 16:9 で高さは自前計算、100% は禁止 */
#carousel-track img {
  width: 100%;
  height: auto;          /* ← これがポイント。100%を上書き */
  aspect-ratio: 16 / 9;  /* 画像自身で比率をそろえる */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* 4) キャプションは2行で省略（高さブレ防止） */
#carousel-track p{
  margin-top: 8px;
  font-weight: 800;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* スライド内のメディア（画像 / YouTube / Instagram）を同じサイズ感にそろえる */

/* まず“メディア枠”を 16:9 に統一 */
#carousel-track iframe,
#carousel-track .instagram-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;  /* 画像と同じ比率に揃える */
  border: 0;
}

/* YouTube 埋め込み：枠いっぱいにフィットさせる */
#carousel-track iframe {
  height: 100%;          /* aspect-ratio とセットで 16:9 に */
}

/* Instagram 埋め込み：余計なズレ防止用（高さは枠に任せる） */
#carousel-track .instagram-media {
  margin: 0;
  overflow: hidden;
}



/* ===== interview slide ===== */
/* ===== インタビュー用スライダー v3（スクロールスナップ） ===== */
.intv3 {
  --gap: 16px;
  --visible: 3;               /* 既定：3枚表示 */
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 60px;
}

/* トラック（横フレックス＋スナップ） */
.intv3 .intv3-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0;                 /* 他所の左右パディングを完全遮断 */
  margin: 0;
  scrollbar-width: none;      /* Firefox: スクロールバー非表示 */
  touch-action: pan-y;        /* 縦スク優先、横はドラッグ可 */
}
.intv3 .intv3-track::-webkit-scrollbar { display: none; } /* WebKit */

/* カード（可視枚数に応じて幅を算出） */
.intv3 .intv3-card {
  flex: 0 0 calc( (100% - (var(--gap) * (var(--visible) - 1))) / var(--visible) );
  scroll-snap-align: start;
  box-sizing: border-box;
  margin: 0;                  /* 他のグローバルmargin/gapの影響を遮断 */
  border-radius: 12px;
  background: transparent;
  
}
.intv3 .intv3-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}
.intv3 .intv3-card p {
  margin: .6rem 0 0;
  line-height: 1.6;
}

/* 矢印 */
.intv3 .intv3-arrows {
  
  inset: 0;
  pointer-events: none;
  position: absolute;
  top: 20px;     /* 下から少し余白 */
  right: 0px;       /* 左端に寄せる */
  display: flex;
  gap: 8px;        /* ボタンの隙間（必要なら） */
  pointer-events: auto;
  display: none;
}
.intv3 .intv3-arrows button {

  transform: translateY(-50%);
  width: 48px; height: 48px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
}
.intv3 .intv3-arrows .prev { left: 8px; }
.intv3 .intv3-arrows .next { right: 8px; }
.intv3 .intv3-arrows img { width: 70%; height: 70%; display: block; }

/* フォーカス可視性 */
.intv3:focus-visible { outline: 2px solid #1e90ff; outline-offset: 2px; }

/* レスポンシブ：2枚 → 1枚 */
@media (max-width: 900px) { .intv3 { --visible: 2; } }
@media (max-width: 600px) { 
  .intv3 { --visible: 1; }

  .intv3 .intv3-arrows {
    display: flex;
  }

}

/* ===== リセット：interviewスライダー ===== */
.interview-slide .slide2 .slide_img {
  /* グローバル .slide_img の左右パディング＆スクロール系を打ち消す */
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}
.interview-slide .slide2 .slide_img > div {
  /* グローバル .slide_img > div の margin を打ち消す */
  margin: 0 !important;
  /* 3枚見せの前提と整合（あなたのCSSと同じだが念押し） */
  flex: 0 0 calc(100% / 3) !important;
  box-sizing: border-box;
  /* 内側の左右余白は OK（border-box なので幅は崩れない） */
  /* padding: 0 .5rem;  ← ここはお好みで（既に指定済みなら不要） */
}

/* ===== corp-slide（シンプル安定版） ===== */
.corp-slide {
  --gap: 16px;       /* カード間ギャップ */
  --visible: 4;      /* 既定の表示枚数：4 */
  --arrow-pad: 12px; /* 矢印の左右内側余白 */
  position: relative;
  width: 100%;
  margin-block: 24px;     /* 上下余白 */
  overflow: hidden;       /* はみ出しを隠す（互換性重視） */
  padding-top: 50px;
}

/* トラック：横フレックス＋スナップ。余計なパディングは持たせない */
.corp-slide .slide_img {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;

  /* 進捗バー（スクロールバー）非表示 */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧 Edge/IE */
}
.corp-slide .slide_img::-webkit-scrollbar { display: none; }

/* カード幅：visible と gap を満たす幅を算出（合計で100%にピタ） */
.corp-slide .slide_img > div {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
  margin: 0;                 /* gap に任せる */
  min-width: 0;              /* サブピクセル誤差での横溢れ抑制 */
  scroll-snap-align: start;
  scroll-snap-stop: always;  /* スナップを強制 */
  border-radius: 10px;
  background: transparent;
}

/* 画像・テキスト */
.corp-slide .slide_img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  max-width: 100%;
}
.corp-slide .slide_img p {
  margin: .5rem 0 0;
  text-align: center;
  font-weight: 600;
}

.corp-slide .slide3_arrow {
  position: absolute;
  top: 0px;     /* 下から少し余白 */
  right: 0px;       /* 左端に寄せる */
  display: flex;
  gap: 8px;        /* ボタンの隙間（必要なら） */
  pointer-events: auto;
}
.corp-slide .slide3_arrow button {
  pointer-events: auto;
  position: static;       /* 親flexで位置決め */
  transform: none;
  width: 44px; height: 44px;
  border: none;
  background: rgba(0,0,0,0);
  border-radius: 50%;
  padding: 0;
  display: grid; place-items: center;
  cursor: pointer;
}
.corp-slide .slide3_arrow button:hover { background: rgba(0,0,0,0.08); }
.corp-slide .slide3_arrow img { width: 70%; height: 70%; display: block; line-height: 0; }

.corp-space .corp-arrow{
  display: none;
}


/* レスポンシブ：表示枚数 */
@media (max-width: 1024px){ .corp-slide{ --visible: 3; } }
@media (max-width: 768px) { .corp-slide{ --visible: 2; };
.corp-slide .slide3_arrow {
  display: flex;
}

.corp-space .corp-arrow{
  display: flex;
}

}
@media (max-width: 520px) { .corp-slide{ --visible: 1; } }




/* 4枚見せを明示（既定も4だが、上書きしやすいように） */
.support-slider.corp-slide { --visible: 4; }

/* もし <ul><li> のまま使いたい場合（下の「既存マークアップのまま使う」参照） */
.support-slider.corp-slide .slide_img > li {
  box-sizing: border-box;
  flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
  margin: 0;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: 10px;
  background: transparent;
}

/* レスポンシブ：表示枚数 */
@media (max-width: 768px) { .support-slider.corp-slide { --visible: 2; } }