/* =====================================================================
   トップページ スライダー：カード型デザイン（参考：minwookshin.com）
   - 中央のカード＋左右に隣のカードが少しはみ出して見える
   - カードは角丸＋細い枠線
   - タイトルはカードの下に中央寄せ（今のスライドだけ表示）
   - ドットは四角。今のスライドだけ濃い色＋薄いグレーの角丸背景
   ※ Swiper本体のCSS（front-page.php内で後から読み込み）に負けないよう、
     セレクタの先頭に .top-hero を付けて優先度を上げている
   ===================================================================== */

/* ---- 枠：背景色をなくし、カードの外側を見せる ---- */
.top-hero .swiper-container {
  background: transparent;
  padding-bottom: 0;         /* 元は6px。下の一覧との間を詰める */
  margin-bottom: 0;          /* main.css の .swiper-container（margin-bottom:20px・全ページ共通）をトップだけ上書き */
}

/* ---- 1枚のカードの幅（slidesPerView:'auto' のときはここで決まる） ---- */
.top-hero .swiper-container .swiper-slide {
  width: 72%;               /* 大きくすると隣のはみ出しが減る */
  max-width: 520px;         /* PCで大きくなりすぎないよう上限（スマホでは72%のほうが小さいので効かない）。元は640px */
}

/* ---- カード本体：角丸＋細い枠線 ---- */
.top-hero .swiper-slide .post__thumb--img {
  border: 1px solid #e6e6e6;
  border-radius: 28px;
  overflow: hidden;          /* 画像を角丸で切り抜く */
  margin: 0;
}

/* ---- タイトル：カードの下に中央寄せ ---- */
.top-hero .swiper-container .text-block {
  position: static;          /* 画像の上に重ねていた絶対配置を解除 */
  text-align: center;
  margin-top: 12px;
  line-height: 1.5em;
  transition: opacity .4s ease;
}
.top-hero .swiper-container .text-block .meta-block {
  font-size: 90%;
  color: #8a8a8a;
}
/* 今のスライド以外のタイトルは隠す */
.top-hero .swiper-slide:not(.swiper-slide-active) .text-block {
  opacity: 0;
}

/* ---- ドット（ページネーション） ---- */
.top-hero .swiper-container .swiper-pagination {
  position: static;          /* カードの下に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  margin: 10px 0 0;
  /* ドット同士の間隔。Swiper本体のCSSがこの変数で margin を指定しているので、変数で渡す */
  --swiper-pagination-bullet-horizontal-gap: 11px;
}
.top-hero .swiper-container .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  border-radius: 2px;        /* 四角に近い角丸 */
  background: #d0d0d0 !important;
  opacity: 1;
  transition: all .3s ease;
}
/* 今のスライドのドット：濃い四角＋薄いグレーの角丸背景（box-shadowで表現） */
.top-hero .swiper-container .swiper-pagination-bullet-active {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #1c1d1d !important;
  box-shadow: 0 0 0 11px #f0f0f0;
}

/* =====================================================================
   トップページのレイアウト
   - スライダー（.top-hero）をヘッダー直下に配置。見出しは一覧の上（.list-head）
   - 768px以上：スライダーは画面の端から端まで
   - 767px以下（スマホ）：スライダーは左右20pxの余白の内側
   ===================================================================== */

/* ---- スマホ（基本） ---- */
.top-hero {
  margin-top: 30px;          /* ヘッダーとの間（元の .container03-1 の上余白と同じ） */
  padding-left: 20px;        /* 元の .container03 の左右余白と同じ */
  padding-right: 20px;
}
/* 一覧と右メニューの上余白（main.css の .container03-1 の margin-top をトップだけ上書き）。
   代わりに見出し（LATEST POSTS）とドットの間に 20px 空ける。
   右メニューも同じだけ下げて、PCで見出しと上端をそろえる */
.container03--front .container03-1,
.container03--front .container03-2 {
  margin-top: 0;
  padding-top: 20px;
}

/* ---- タブレット・PC（768px以上） ---- */
@media (min-width: 768px) {
  .top-hero {
    margin-top: 90px;        /* 元の .container03-1 の上余白（PC）と同じ */
    padding-left: 0;         /* スライダーを画面の端から端まで */
    padding-right: 0;
  }
}

/* ---- PC（960px以上） ---- */
@media (min-width: 960px) {

  /* スライダーを中央 960px（ヘッダー・一覧と同じ幅）でスパッと切る
     左右から「画面の半分 − 480px」ずつ切り落とし、中央 960px だけ残す
     ・切る幅を変えるときは 480px（残したい幅の半分）を変更
     ・画面幅が 960px 以下だと値がマイナスになり、何も切られない */
  .top-hero .swiper-container {
    clip-path: inset(0 calc(50% - 480px));
  }
}