/* =====================================================================
   トップページ スライダー：カード型デザイン（参考：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・全ページ共通）をトップだけ上書き */
  margin-top: 0;             /* main.css の margin-top:10px を解除。カテゴリページの見出しと同じ高さから始める */
}

/* ---- 1枚の大きさ ----
   幅：スライダーの幅いっぱい（front-page.php の slidesPerView:1 で Swiper が決める）
   高さ：4:3 だが、最大 390px（元のカード 520×390 と同じ高さ）
     ・(100vw − 左右余白40px) × 0.75 ＝ 幅いっぱいで 4:3 にしたときの高さ
     ・それが 390px を超える幅（約560px以上）では 390px に止まる
     ・390px で止まったあとは、画像の上下が切れる。切る位置は上下の真ん中（main.css の background-position:center） */
.top-hero .swiper-slide .post__thumb--img a {
  padding-top: 0;            /* main.css の padding-top:75%（4:3）を解除 */
  height: min(390px, calc((100vw - 40px) * 0.75));
}

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

/* ---- 日付・カテゴリ・タイトル：カードの下に左寄せで1行 ----
   ・日付とカテゴリ（.meta-block）の右にタイトルを並べる
   ・タイトルが長くて1行に収まらないときは、末尾を「…」で省略 */
.top-hero .swiper-container .text-block {
  position: static;          /* 画像の上に重ねていた絶対配置を解除 */
  display: flex;
  align-items: baseline;     /* 日付とタイトルの文字の下端をそろえる */
  gap: 0.8em;                /* 日付・カテゴリとタイトルの間 */
  text-align: left;
  white-space: nowrap;       /* 折り返さない */
  margin-top: 12px;
  line-height: 1.5em;
  transition: opacity .4s ease;
}
.top-hero .swiper-container .text-block .meta-block {
  flex-shrink: 0;            /* 日付・カテゴリは縮めない */
  font-size: 90%;
  color: #8a8a8a;
}
.top-hero .swiper-container .text-block > a {
  min-width: 0;              /* これがないと省略（…）が効かない */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 今のスライド以外のタイトルは隠す */
.top-hero .swiper-slide:not(.swiper-slide-active) .text-block {
  opacity: 0;
}

/* ---- ドット（ページネーション） ---- */
.top-hero .swiper-container .swiper-pagination {
  position: static;          /* カードの下に配置 */
  display: flex;
  justify-content: flex-start; /* 左寄せ（元は 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;
}

/* =====================================================================
   トップページのレイアウト
   - 全体はカテゴリページ（index.php）と同じ：左の列（.container03-1）＋右メニュー（.container03-2）
     余白も main.css のまま（PCでは左の列の上90px、右メニューは上0なので右メニューが90px上から始まる）
   - スライダー（.top-hero）は左の列の先頭に、列の幅いっぱいで1枚ずつ
   - 高さはどの幅でも「4:3、ただし最大390px」（上の .post__thumb--img a の指定）
   ===================================================================== */

/* スライダー（ドット）と下の見出し「LATEST POSTS」の間 */
.top-hero {
  margin-bottom: 20px;
}

/* PC（960px以上）：スライダーだけ右にはみ出させて広げる（左の列・一覧の幅は変えない）
   ・スライダー（画像）と右メニューの文字の間を、画像の下端〜LATEST POSTS の間（日付タイトル・ドットを含めて約100px）と同じにする
   ・右メニューの文字の左端 959px − 約100px ＝ 約858px が右端。列の中身の右端 793px から 65px はみ出す
   ・右メニューの一番長い行が伸びると文字の左端も左へ動くので、そのときはこの値を調整 */
@media (min-width: 960px) {
  .top-hero {
    margin-right: -65px;
  }
}

/* ---- 右メニューの一番上の「TOTAL ○○POSTS」（トップだけ。front-page.php） ----
   右メニューのタイトル・項目（main.css の h1.type-C / ul.type-B）と同じ書式にして、見分けがつかないように */
.side-total {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 1em;
  margin: 5px 0 0;           /* タイトル（CATEGORIES）と同じ上余白。下は次の CATEGORIES の上余白（10px）で空く */
}