* {
  box-sizing: border-box;
}

/*これを毎回一行目に入れる。要素が崩れる*/

html {
  font-size: 16px;
}

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  opacity: 0.7;
}

/* ロゴ画像だけサイズ制限をかける */
.logo-area .logo {
  max-width: 300px;
  /* 好きなサイズに調整OK！例：200pxや250pxもOK */
  width: 100%;
  height: auto;
  background-color: #ffffff;
  padding: 10px 20px;
  /* ロゴ周りの余白 */
  text-align: left;
  display: block;
}

/* 左に配置 */
.logo-area {
  position: relative;
  z-index: 10;
  /* ヘッダーより前面に出す */
}

.logo {
  display: block;
  max-width: 100%;
  /* 親要素の幅に合わせる */
  height: auto;
  /* 縦横比を保ったまま高さを調整 */
  object-fit: contain;
  /* 画像が親要素内に収まるように調整 */
}

@media screen and (max-width: 768px) {
  .logo-area .logo {
    margin: 0 auto;
  }
}

.header-nav {
  display: flex;
  justify-content: space-between;
  /* 左右に分ける */
  align-items: center;
  /* 縦中央揃え */
  background-color: #263238;
  padding: 10px 20px;
  color: #ffffff;
  position: relative;
}

/* ヘッダー（紺色） */
.header {
  height: auto;
  /* 固定していたら解除 */
  padding: 10px 20px;
  display: flex;
  align-items: center;
  background-color: #263238;
  color: #FEFDFB;
}

.header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
  /* 必要に応じて幅調整 */
}

@media screen and (max-width: 768px) {
  .header-actions {
    flex: 1;
  }
}

/* 各カテゴリボタン */
.dropdown-toggle {
  background: none;
  border: none;
  color: #FEFDFB;
  font-weight: bold;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .dropdown-toggle {
    width: 100%;
    display: block;
    text-align: left;
    padding: 5px 0;
    border-bottom: 1px solid;
  }
}

/* ドロップダウンメニュー */
.dropdown-menu {
  display: none;
  position: absolute;
  color: #263238;
  margin-top: 5px;
  list-style: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 100;
  min-width: 180px;
  white-space: nowrap;
  font-size: 14px;
}

.dropdown-menu li {
  padding: 6px 12px;
  cursor: pointer;
  line-height: 1.3;
  border-bottom: 1px solid #ccc;
  position: relative
}

.dropdown-menu {
  display: none;
  background-color: #5C4033;
  /* ダークブラウン */
  padding: 0;
  margin: 0;
  max-width: 100vw;

}



.dropdown-menu li {
  color: white;
  padding: 0x;
  border-top: 1px solid #F2C879;
  font-size: 14px;
  text-align: left;
}

.dropdown-menu li a {
  padding: 12px 20px;
  display: block;
}

.dropdown-menu li:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f0da";
  position: absolute;
  left: 0;
  /*左端からのアイコンまで*/
  color: #444;
  /*アイコン色*/
}

.dropdown-menu li:hover {
  background-color: #FEFDFB;
}

/* ドロップダウン親の相対位置 */
.dropdown {
  position: relative;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .dropdown {
    width: 100%;
    text-align: left;
  }
}

/* メニューは左寄せ＆可能な限り幅を取る */
.nav-list {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* アイコンと検索バーの間隔 */
}

.header-x-icon {
  font-size: 24px;
  /* フッターと同じ大きさ */
  color: #fff;
  /* 白色（ヘッダー背景に合わせて） */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-x-icon:hover {
  text-decoration: underline;
  /* フッターと揃える */
}

/* フォーム全体を相対配置 */
.search-form {
  position: relative;
  width: 200px;
  /* お好みで幅調整 */
}

/* 入力欄のスタイル */
.search-input {
  width: 100%;
  line-height: 16px;
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  border-radius: 999px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* アイコンボタン（検索ボックスの中に重ねる） */
.search-icon-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #444;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
}

.subscribe-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* アイコンと文字の間隔 */
  line-height: 16px;
  padding: 8px 36px 8px 12px;
  font-size: 14px;
  color: #444;
  /* チャコールグレー */
  background-color: #FEFDFB;
  border: 1px solid #ccc;
  border-radius: 999px;
  /* 丸っこいボタンにする */
  cursor: pointer;
  transition: background-color 0.2s;
}

/* PCでは非表示 */
.subscribe-button--fab {
  display: none;
}



/* モバイル用：メニューを縦並びにする */
@media screen and (max-width: 768px) {
  .subscribe-button {
    padding: 8px;
  }

  .subscribe-button--fab {
    display: inline-flex;
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
    background-color: #Fafafa;
    /* テーマ色に合わせて調整 */
    color: #444;
    border: 1px solid rgba(0, 0, 0, .06);
    text-decoration: none;
    z-index: 9999;
  }

  .subscribe-button--fab .only-pc {
    display: none;
  }


  .subscribe-button--fab i {
    font-size: 22px;
  }
}


.subscribe-icon {
  font-size: 16px;
}

/* ハンバーガーメニューの見た目 */
.hamburger {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  /* or absolute; depending on context */
  z-index: 9999;
  /* 高めにする */
}

.hamburger span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 6px 0;
  background-color: #fff;
}

/* モバイル用：メニューを縦並びにする */
@media screen and (max-width: 768px) {
  .hamburger {
    display: flex;
    width: 40px;
  }

  /* ドロップダウンメニュー */
  .dropdown-menu {
    display: none;
    position: absolute;
    background-color: #5C4033;
    color: #263238;
    margin-top: 0px;
    list-style: none;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 100;
    min-width: 180px;
    white-space: nowrap;
    font-size: 14px;

  }

  .dropdown-menu li {
    padding: 6px 12px;
    cursor: pointer;
    line-height: 1.3;
    border-bottom: 1px solid #ccc;
    position: relative
  }

  .dropdown-menu li:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0da";
    position: absolute;
    left: 0;
    /*左端からのアイコンまで*/
    color: #444;
    /*アイコン色*/
  }

  .dropdown-menu li:hover {
    background-color: #FEFDFB;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 52px;
    left: 0;
    width: 100%;
    background-color: #263238;
    padding: 20px;
    z-index: 999;
    align-items: flex-start;
  }

  .nav-list.show {
    display: flex;
  }
}

/* ▼スマホ専用表示クラス */
.only-sp {
  display: none;
}

.only-pc {
  display: block;
}

@media screen and (max-width: 768px) {
  .only-sp {
    display: block;
  }

  .only-pc {
    display: none;
  }
}

.slider img {
  aspect-ratio: 1200 / 675;
  /* 写真の縦横比 */
  object-fit: cover;
  /* もともとの画像の縦横比を保ったまま引き延ばす */
}

.slider {
  position: relative;
  overflow: hidden;
  /* スライドの外にはみ出した要素を隠す */
}

/* 矢印ボタン共通 */
.slide-arrow {
  background-color: rgba(0, 0, 0, 0);
  bottom: 0;
  height: 0;
  margin: auto;
  position: absolute;
  top: 0;
  width: 0;
}

.prev-arrow {
  border-bottom: 15px solid rgba(0, 0, 0, 0);
  border-left: 0;
  border-right: 15px solid #fff;
  border-top: 15px solid rgba(0, 0, 0, 0);
  left: 25px;
  z-index: 1;
}

.next-arrow {
  border-bottom: 15px solid rgba(0, 0, 0, 0);
  border-left: 15px solid #fff;
  border-right: 0;
  border-top: 15px solid rgba(0, 0, 0, 0);
  right: 25px;
}

/* 親に基準を指定 */
.slick-slide {
  position: relative;
}

.slide-info {
  position: absolute;
  /* ← ここはabsoluteのままでOK */
  bottom: 20px;
  /* ← 上からじゃなく、下からどれくらい空けるか */
  left: 5%;
  /* ← 画面の左端から5%の位置に配置（調整可） */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1.5rem 2rem;
  /* ← 内側の余白（remで大きく） */
  border-radius: 12px;
  width: 60%;
  /* ← 小さすぎたらここを広げる（例: 60～70%） */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  display: none;
  /* パソコンでは表示させたいので display: block */

  height: 150px;
  /* ← すべてのスライドの高さを統一 */

  z-index: 10;
  /* ここに共通のデザインを記述 */

}


.slide-title {
  font-size: 18px;
  font-weight: bold;
  color: #5C4033;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 表示行数を2に制限 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* はみ出した部分を隠す */
  text-overflow: ellipsis;
  /* 省略記号を表示 */
}

.slide-excerpt {
  font-size: 14px;
  color: #555;
  margin: 0 0 8px 0;
}

.slide-date {
  font-size: 12px;
  color: #777;
  margin-top: auto;
  /* 一番下に固定 */

}


/* どのブレークポイントでも、現在スライドだけ表示する */
.slick-current .slide-info {
  display: block;
}

/* 暗幕も「現在スライドだけ解除」に統一 */
.slick-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2;
}
.slick-current::before {
  background: none;
}


/* ▼楕円NEWバッジ */
.new-badge-slider {
  padding: 0;
  /* 余白をなくすことで形を整える */
  border-radius: 50%;
  /* 楕円形にする */
  aspect-ratio: 2 / 1;
  /* 横長の楕円にする */
  width: 40px;
  /* 幅を調整 */
  display: flex;
  /* 中央寄せのための設定 */
  align-items: center;
  /* 垂直方向に中央 */
  justify-content: center;
  /* 水平方向に中央 */
  background-color: #f28c84;
  /* 背景色（任意で調整） */
  color: #444444;
  /* 文字色 */
  font-size: 12px;
  /* フォントサイズ（任意で調整） */
}

/* スライダー内の全スライドを暗くする */
.slick-slide {
  position: relative;
}

.slick-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  /* 暗さの濃さはここで調整 */
  z-index: 2;
}

/* 現在表示中（中央）のスライドは暗くしない */
.slick-current::before {
  background: none;
}

/*これ*/
/* スマホ用のスライダー内テキスト情報のスタイル */
@media (max-width: 768px) {
  .slider {
    position: relative;
    /* スライド全体を基準に .slide-info を絶対配置するため */
  }

  .slide-info {
    position: absolute;
    /* スライド内で自由に配置するため */
    bottom: 5%;
    /* 下に少しマージン */
    left: 5%;
    /* 左にマージン */
    right: 5%;
    /* 右にも同じマージン */

    height: 22.33%;
    /* スライダー画像の下1/3の高さに収める */
    background-color: rgba(255, 255, 255, 0.85);
    /* 背景を薄く白にして読みやすく */
    color: #333;
    /* 文字色を濃いグレーに */
    padding: 10px;
    /* 内側に余白（上下左右均等） */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* タイトルを下寄せ */
    gap: 8px;
    /* 各要素の間隔 */
    z-index: 10;
    /* 他要素より前に出す */
  }

  .slick-slide .slide-info {
    width: 90%;
    left: 5%;
    bottom: 10px;
    padding: 1rem;
    display: block;
    height: auto;
    min-height: 80px;
    padding-left: 60px;

  }

  /* 矢印ボタン共通 */
  .slide-arrow {
    background-color: rgba(0, 0, 0, 0);
    bottom: 0;
    height: 0;
    margin: auto;
    position: absolute;
    top: 0;
    width: 0;
  }

  .prev-arrow {
    border-bottom: 10px solid rgba(0, 0, 0, 0);
    border-left: 0;
    border-right: 10px solid #fff;
    border-top: 10px solid rgba(0, 0, 0, 0);
    left: 25px;
    z-index: 1;
  }

  .next-arrow {
    border-bottom: 10px solid rgba(0, 0, 0, 0);
    border-left: 10px solid #fff;
    border-right: 0;
    border-top: 10px solid rgba(0, 0, 0, 0);
    right: 25px;
  }

  .new-badge-slider {
    position: absolute;
    top: 15px;
    /*どこに置きたいのかによって変えていきましょう*/
    left: 12px;
  }

  .slide-date {
    position: static;
    top: 15px;
    /*どこに置きたいのかによって変えていきましょう*/
    left: 60px;
    /*どこに置きたいのかによって変えていきましょう*/
    display: block;
    font-size: 12px;
    color: #666;
    vertical-align: middle;
  }

  .slide-title {
    font-size: 14px;
    margin: 0;
    padding-left: 0;
    /* 左端をNEWバッジに合わせる */
  }



}

.event-section {
  background-color: #263238;
  padding: 2.5rem;
  width: 90rem;
  max-width: 100%;
  margin: 5rem auto;
  border-radius: 0.625rem;
}

.event-heading {
  background-color: #fefdf8;
  color: #263238;
  text-align: center;
  border-radius: 0.625rem;
  font-size: 40px;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0 0 20px 0;
}

.event-heading h2 {
  font-size: 40px;
  color: #263238;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0 0 20px 0;
}

.event-list {
  background-color: #546E7A;
  padding: 1.875rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  border-radius: 0.625rem;
}

.event-card {
  background-color: #FEFDFB;
  border-radius: 1rem;
  overflow: hidden;

  display: flex;
}

.event-card img {
  width: 18.75rem;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

.event-content {
  padding: 1rem 1.25rem;
  color: #333333;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.4rem;
}

.event-content p {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.event-content h3,
.event-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.event-date {
  font-size: 0.9rem;
  color: #777;
}

.main-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  /* ←ここを例：40px に変更すると上下の間が広がります */
  width: 90rem;
  max-width: 100%;
  margin: 5rem auto;
}

/* 知識＋トレンド：横並び（PC） */
.knowledge-trend-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: 60%;
}


.knowledge-section {
  background-color: #5C4033;
  padding: 3.9%;
  border-radius: 10px;
  width: 100%;
  margin-left: auto;

}

.knowledge-heading {
  text-align: center;
  margin-bottom: 1.56vw;
}

.knowledge-heading h2 {
  white-space: nowrap;
  /* 改行させない */
  color: #F2C879;
  margin: 0;
  font-size: 37px;
}

.knowledge-text h3 {
  margin-bottom: 0.5rem;
  /* タイトルの下に余白 */
}


.knowledge-text h3,
.knowledge-text p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.knowledge-date {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #666;
}



.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* カードの間隔（20px） */
  align-items: center;
}

.knowledge-card {
  display: flex;
  flex-direction: row;
  width: 100%;
  background-color: #FFF8DC;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.knowledge-card img {
  width: 50%;
  object-fit: cover;
  aspect-ratio: 1200 / 675;
  height: auto;
}

.knowledge-text {
  width: 50%;
  padding: 0.2vw 0.1vw;
  color: #333333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: flex-start;
  /* ← 中身を上揃えにする */
}

.knowledge-text h3 {
  font-size: clamp(16px, 1.4vw, 24px);
  margin: 0 0 0.6vw;
}

.knowledge-text p {
  font-size: clamp(14px, 1.1vw, 18px);
  margin: 0 0 10px;
}


.trend-content h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


.trend-section {
  background-color: #FFF8DC;
  padding: 3.9%;
  border-radius: 10px;
  width: 100%;
  margin-left: auto;
  max-width: 100%;
}

.main-wrap .trend-section {
  margin-top: 90px !important;
  /* ボーリング知識とトレンドTop3の間隔 */
}

.trend-heading h2 {
  font-size: 40px;
  color: #263238;
  letter-spacing: 0.2em;
  text-align: center;
  margin: 0 0 20px 0;
}

.trend-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.trend-card {
  display: flex;
  background-color: #263238;
  color: #FFF8DC;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  align-items: center;

}

.trend-card img {
  width: 50%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1200 / 675;
}

.trend-content {
  width: 50%;
  padding: 16px;
  box-sizing: border-box;
}

.trend-label {
  display: inline-block;
  background-color: #F2C879;
  color: #263238;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.trend-content h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
}

.trend-date {
  font-size: 14px;
  color: #ddd;
  margin: 0;
}

/* -------------------------
   メディアクエリ：スマホ・iPad対応（max-width: 768px）
------------------------- */

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }

  .event-section {
    padding: 2.5rem 0;
    object-fit: cover;
    object-position: center;
  }

  .event-heading {
    max-width: calc(100% - 30px);
    margin: 0 auto 1.25rem;
    border-radius: 0;
  }

  .event-list {
    padding: 1rem 0;
    border-radius: 0;
  }

  .event-card {
    border-radius: 0;
  }

  .event-card img {
    width: 35px;
    object-fit: cover;
    height: auto;
    object-position: center;
  }

  .event-content {
    padding: 15px 10px;
  }

  .event-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .event-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
  }
}

.main-wrap {
  width: 65%
}

/* 女子＋男子：縦並び */
.ranking-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 3rem;
  gap: 70px;
  /* ←ここを例：40px に変更すると上下の間が広がります */
  width: 30%;
}


/* 女子ランキングの枠 */
.ranking-box.girls {
  width: 384px;
  background-color: #fff;
}

.ranking-box.boys {
  margin-bottom: 3rem;
  /* ←必要に応じてこの値を変更してください */
}

/* タイトルボックス */
.ranking-title.female {
  background-color: #F28C84;
  color: #5C4033;
  font-weight: bold;
  font-size: 18px;
  width: 384px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
}

/* 男子ランキングのタイトルボックス */
.ranking-title.male {
  background-color: #546E7A;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  width: 384px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
}

/* 各選手のカード */
.ranking-card {
  border: 1px solid #ccc;
  width: 384px;
  height: 54px;
  display: flex;
  align-items: center;
  margin-bottom: 0px;
}

/* 順位＋矢印を縦に並べる */
.rank-block {
  width: 52px;
  height: 54px;
  /* 高さをカードと同じにして中央揃えをしやすく */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 追加：数字と矢印を上下中央に寄せる */
  gap: 2px;
  /* 数字と矢印の隙間 */
  box-sizing: border-box;
}

/* 順位の数字 */
.rank-number {
  width: 52px;
  height: 29px;
  font-size: 23px;
  font-weight: normal;
  /* ←ここを細く */
  font-family: sans-serif;
  /* プレイヤー名と同じフォントに揃える */
  background-color: #FFF8DC;
  color: #000;
  text-align: center;
  line-height: 29px;
}

/* 矢印の丸 */
.arrow-circle {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* 数字と太さバランスよく */
  font-weight: 200;
  /* ←細字。必要に応じて300でもOK */
  margin: 0;
  /* margin-top を削除 */
}

/* 上昇：ピンク */
.arrow-circle.up {
  background-color: #F28C84;
  color: #000;
}

/* 同じ：黄色 */
.arrow-circle.same {
  background-color: #F2C879;
  color: #000;
}

/* 下降：グレー */
.arrow-circle.down {
  background-color: #DCDCDC;
  color: #000;
}

/* 画像は16:9比率を保持して縮小 */
.ranking-card img {
  height: 52px;
  width: 95px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;/*余白を追加したいので、ここも追加*/
    margin-right: 8px;/*余白は追加に*/
}
.rank-block {
    width: 52px;
    height: 52px;/*これは今回とは関係ありませんが、枠のボーダーが見えた方が良いので高さを小さくしました*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
}
/* プレイヤー名 */
.player-name {
  font-size: 16px;
  color: #444444;
  flex-grow: 1;
}

.player-link {
  display: flex;/*今回はflex*/
    align-items: center;/*上下縦方向中央よせ*/
    color: inherit;
    width: 100%;/*横幅は目一杯に*/
}

.player-link:hover .player-name {
  text-decoration: underline;
}


.category-title {
  background-color: #5C4033;
  /* 見出しの背景：Figmaで使っているものを想定 */
  color: #fafafa;
  /* 文字色：クリーム色（他セクションと合わせる） */
  font-size: 18px;
  font-weight: bold;
  height: 66px;
  width: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
  border-radius: 0px;
}

.category-dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 384px;
  border: 1px solid #F2C879;
  border-radius: 0;
}

.category-list .dropdown-toggle {
  width: 100%;
  height: 66px;
  line-height: 66px;
  background-color: #444444;
  /* チャコールグレー */
  color: #fafafa;
  text-align: left;
  padding-left: 20px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 1px solid #F2C879;
}



.category-list .dropdown {
  position: relative;
}

/* 子メニューの背景色と文字色をヘッダーナビと同じに */
.category-list .dropdown-menu li:hover {
  background-color: #263238;
  /* ヘッダーナビ背景色 */
  color: #FFF8DC;
  /* クリーム文字 */
}

/* 子メニューの背景色と文字色をヘッダーナビと同じに */
.category-list .dropdown-menu li:hover {
  background-color: #FEFDFB;
  color: #263238;
}



/* スマホでは全部縦に切り替える */
@media screen and (max-width: 768px) {
  .knowledge-trend-wrapper {
    flex-direction: column;
  }

  .main-section {
    flex-direction: column-reverse;
  }

  .event-section .ranking-wrapper,
  .knowledge-trend-wrapper,
  .ranking-box.girls,
  .ranking-box.boys,
  .knowledge-section,
  .trend-section {
    width: 100%;
  }
}

@media (min-width: 769px) {
  .main-section {
    align-items: flex-start;
    /* これで右カラムの高さが左に引っ張られない */
  }

  .knowledge-trend-wrapper {
    align-self: flex-start;
    /* 念のため */
  }
}

/* ▼全体構造：左1/3広告スペース、右2/3に記事 */
.latest-articles-section {
  display: flex;
  justify-content: flex-end;
  max-width: 1280px;
  margin: 0 auto;
}

/* ▼右2/3部分 */
.latest-articles-inner {
  width: 100%;
  margin-top: 40px;
}

/* ▼セクション見出し */
.latest-articles-title {
  font-size: 32px;
  font-weight: bold;
  color: #5C4033;
  margin-bottom: 30px;
}

/* ▼2列×6行のグリッド表示 */
.latest-articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}

/* ▼記事カード */
.article-card {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

/* ▼画像エリア */
.article-image-wrapper {
  position: relative;
}

.article-image-wrapper img {
  width: 100%;
  aspect-ratio: 1200 / 675;
  object-fit: cover;
  display: block;
}

/* ▼楕円NEWバッジ */
.new-badge {
  padding: 0;
  border-radius: 50%;
  aspect-ratio: 2 / 1;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f28c84;
  color: #444444;
  font-size: 12px;
}

/* ▼テキスト部分 */
.article-content {
  padding: 16px;
  background-color: #fff;
}

.article-label {
  background-color: #F2C879;
  color: #000;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

.article-content h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


.article-content time {
  font-size: 14px;
  color: #fafafa;
  background-color: #343434;
  padding: 4px 8px;
  border-radius: 4px;
}


/* 最新記事タイトルの装飾 */
.latest-articles-title {
  background-color: #5C4033;
  /* 茶色の背景 */
  color: #FFFFFF;
  /* 白文字 */
  padding: 10px 40px;
  display: inline-block;
  border-radius: 5px;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* タイトルを中央寄せ */
.latest-articles-section h2.latest-articles-title {
  display: block;
  margin: 0 auto 30px auto;
  /* 上左右下のマージン：中央寄せ */
  width: fit-content;
  /* タイトル幅を文字に合わせる */
}


/* ▼ボタンエリア：中央に集めて間隔を空ける */
.latest-buttons {
  display: flex;
  justify-content: center;
  /* ✅ 両端→中央寄せに変更 */
  gap: 30px;
  /* ✅ ボタン同士の間隔 */
  margin-top: 20px;
}


.latest-btn {
  background-color: #5C4033;
  color: #fff;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.latest-btn:hover {
  background-color: #3e2d22;
}


.site-footer {
  background-color: #263238;
  color: #fff;
  padding: 20px 0;
  font-size: 14px;
  margin-top: 60px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  flex-wrap: wrap;
}

/* リンクの装飾 */
.footer-left a {
  color: #fff;
  text-decoration: none;
  margin: 0 5px;
}

/* 左側テキストは常に左寄せ */
.footer-left p {
  margin: 0;
  color: #fff;
  text-align: left;
}

.footer-left a:hover {
  text-decoration: underline;
}

/* Xロゴは右側に */
.footer-right {
  font-size: 24px;
}

.footer-right a {
  color: #fff;
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}

/* ============================================
   Contact Form 7 用 カスタムスタイル
   - レイアウト整形
   - チェックUI配色
   - 必須マークの赤色
   - 送信ボタンの色・ホバー
   ============================================ */

/* ◆ フォーム全体のグリッド＆幅 */
.wpcf7 .cf7-grid {
  display: grid;
  gap: 16px;
  /* 各項目の間隔 */
  max-width: 640px;
  /* お好みで調整 */
}

/* ◆ ラベル/見出し（fieldset の legend 含む） */
.wpcf7 .cf-field label,
.wpcf7 .cf-field legend {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

/* ◆ テキスト/メール/テキストエリアの見た目 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
}

.wpcf7 textarea {
  min-height: 160px;
}

/* ★ 全チェックUIの色（ラジオ/チェックボックス） */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
  accent-color: #263238;
}

/* --- CF7の [radio] 出力に対応（行間だけ調整） --- */
.wpcf7 .wpcf7-list-item {
  display: block;
  margin: 4px 0;
  /* 間隔をコンパクトに */
}

.wpcf7 .wpcf7-list-item label .wpcf7-list-item-label {
  color: #000;
  font-weight: 400;
}

.wpcf7 .wpcf7-list-item input[type="radio"]:checked+.wpcf7-list-item-label {
  color: #263238;
  font-weight: 700;
}

/* --- .form-check 用（横並び指定は削除、色だけ維持） --- */
.wpcf7 .form-check {
  margin: 4px 0;
}

.wpcf7 .form-check-label {
  color: #000;
  font-weight: 400;
}

.wpcf7 .form-check-input:checked+.form-check-label {
  color: #263238;
  font-weight: 700;
}

/* ◆ legend（見出し）を少し強調 */
.wpcf7 .cf-fieldset>legend {
  font-weight: 700;
  margin-bottom: 6px;
}

/* ◆ 必須マーク（＊）を赤にする */
.wpcf7-form-control-wrap .required,
.wpcf7 label .required,
.wpcf7 .required {
  color: #e53935;
  /* 赤 */
}

/* =========================
   送信ボタン（CF7の submit）
   ========================= */
.wpcf7 .cf-actions {
  margin-top: 8px;
}

.wpcf7 .cf-actions .wpcf7-submit {
  appearance: none;
  background: #263238;
  /* 基本色 */
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .02s;
}

.wpcf7 .cf-actions .wpcf7-submit:hover {
  background: #37474f;
  /* ホバーで少し明るく */
}

.wpcf7 .cf-actions .wpcf7-submit:active {
  transform: translateY(1px);
}



/*kokokara*/
@media screen and (max-width: 768px) {
  .event-section {
    padding: 2.5rem 0;
    object-fit: cover;
    object-position: center;
  }

  .event-heading {
    max-width: calc(100% - 30px);
    margin: 0 auto 1.25rem;
    border-radius: 0;
  }

  .event-list {
    padding: 1rem 0;
    border-radius: 0;
  }

  .event-card {
    border-radius: 0;
  }

  .event-card img {
    width: 80px;
    object-fit: cover;
    height: auto;
    object-position: center;
  }

  .event-content {
    padding: 15px 10px;
  }

  .event-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .event-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 768px) {
  .knowledge-card {
    flex-direction: column;
  }

  .knowledge-card img,
  .knowledge-text {
    width: 100%;
    padding: 4vw;
  }

  .knowledge-section {
    max-width: 90%;
    padding: 5%;
  }
}

@media (max-width: 768px) {
  .trend-card {
    flex-direction: column;
  }

  .trend-content,
  .trend-card img {
    width: 100%;
    aspect-ratio: auto;
    height: auto;
  }
}

@media screen and (max-width: 1130px) {

  .trend-section,
  .ranking-title.female,
  .ranking-title.male,
  .ranking-box.girls,
  .ranking-box.boys,
  .ranking-card,
  .category-list,
  .category-title,
  .category-dropdown-list {
    width: 100%;
    /*横幅を絶対数で指定していたため、要素をはみ出してしまっていました。*/
  }

}


@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
    /*スマホ時には、全体的に文字を小さくしたいです*/
  }

  .event-card img {
    width: 35%;
    /*画像の横幅が大きいため、文字ははみ出していますので、画像の大きさを変えていきましょう*/
    object-fit: contain;
    /*横幅の指定のままだと、画像が間延びしてしまうかもしれませんので、好みによってここは追加しましょう*/
    object-position: 0 20px;
    /*もし上記を追加したら、こちらも追加してください*/
  }

  .event-list {
    padding: 1rem;
    /*スマホ時に余白を小さくしないと、文字のスペースが狭くなってしまいます。*/
  }

  .knowledge-section {
    margin: 0 auto;
    /*ブロック要素を真ん中寄せにします*/
  }

  .latest-articles-inner {
    width: 100%;
    /*要素の大きさが小さかったため、全幅にしました*/
  }

  .main-wrap {
    width: 100%
  }

  .ranking-wrapper {
    margin-top: 70px;
    /*要素を縦並びにしたことで、上の余白が必要なりました。*/
    width: 100%;
  }

  .ranking-title,
  .ranking-title.male,
  .ranking-card,
  .category-title,
  .category-dropdown-list {
    width: 100%;
    /*横幅を絶対数で指定していたため、要素をはみ出してしまっていました。*/
  }

  .category-list {
    width: 100%;
    /*要素の大きさが小さかったため、全幅にしました*/
  }

  .knowledge-section {
    max-width: 100%;
    /*cssでwidth:100%にしてありましたが、max-widthが残っていて全幅になっていませんでした*/
  }

  .main-section,
  .latest-articles-section {
    padding: 0 15px;
    /*要素が端まできていると、文章が読みづらいため左右に余白を設けます*/
  }

  .event-section {
    padding: 2.5rem 15px;
    /*ここのセクションだけ、他とccssが異なっていたので、修正方法が違います*/
    border-radius: 0;
  }

  .latest-articles-grid {
    grid-template-columns: 1fr;
    /*figmaの共有のお願いをしていますが、先に1列にしております*/
  }

  .trend-heading h2 {
    font-size: 32px;
    /*少しバランスを調整しています。（文字を小さく）*/
  }


}

/*アーカイブ*/
/* Layout */
.archive-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

.archive-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

/* Grid */
.latest-articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 768px) {
  .latest-articles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Card */
.article-card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Image */
.article-image-wrapper {
  position: relative;
}

.article-image {
  width: 100%;
  aspect-ratio: 1200 / 675;
  object-fit: cover;
  display: block;
}

.article-image-link {
  display: block;
}

/* Badge */
.new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #f28c84;
  color: #fff;
  border-radius: 50px;
  padding: 4px 12px;
  font-size: 12px;
}

/* Content */
.article-content {
  padding: 16px;
}

.article-label {
  background-color: #F2C879;
  color: #000;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}

.article-title {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #333;
}

.article-title a {
  color: inherit;
  text-decoration: none;
}

.article-title a:hover,
.article-title a:focus {
  text-decoration: underline;
}

/* Time */
.article-time {
  font-size: 14px;
  color: #fafafa;
  background-color: #343434;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* Pagination */
.news-pagination {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.news-pagination .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 6px 10px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.news-pagination .page-numbers:hover,
.news-pagination .page-numbers:focus {
  background: #f5f5f5;
}

.news-pagination .current {
  background: #343434;
  color: #fff;
  border-color: #343434;
}

/* ====== 基本ナビ ====== */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #263238;
  color: #fff;
  padding: 10px 20px;
  position: relative;
}

.nav-list {
  /* wp_nav_menu の <ul> */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
  align-items: center;
}

.nav-list>li {
  position: relative;
}

.nav-list a {
  color: #FEFDFB;
  text-decoration: none;
  display: block;
  padding: 10px 12px;
}

/* ▼印（親メニューのみ） */
.nav-list .menu-item-has-children>a::after {
  content: "▼";
  font-size: 10px;
  margin-left: 6px;
}

/* ドロップダウン（PC） */
.nav-list .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: #5C4033;
  border: 1px solid #F2C879;
  display: none;
  z-index: 1000;
}

.nav-list .sub-menu li a {
  color: #fff;
  padding: 10px 16px;
}

.nav-list .sub-menu li a:hover {
  background: #FEFDFB;
  color: #263238;
}

/* hover か .is-open で開く（.is-open はJSで付与） */
.nav-list .menu-item-has-children:hover>.sub-menu,
.nav-list .menu-item-has-children.is-open>.sub-menu {
  display: block;
}

/* ====== モバイル(～768px) ====== */
@media (max-width:768px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .hamburger span {
    width: 25px;
    height: 2px;
    margin: 6px 0;
    background: #fff;
  }

  .nav-list {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    background: #263238;
    padding: 10px 16px;
    z-index: 999;
  }

  .nav-list.show {
    display: flex;
  }

  .nav-list>li {
    width: 100%;
  }

  .nav-list a {
    padding: 12px 8px;
  }

  /* サブメニューは積み重ね。開いている親だけ表示 */
  .nav-list .sub-menu {
    position: static;
    border: none;
    background: #38464d;
    padding: 0;
    display: none;
  }

  .nav-list .menu-item-has-children.is-open>.sub-menu {
    display: block;
  }

  /* ▶ を右に、開いたら回転 */
  .nav-list .menu-item-has-children>a::after {
    content: "▶";
    float: right;
    transform: rotate(0);
    transition: transform .2s;
  }

  .nav-list .menu-item-has-children.is-open>a::after {
    transform: rotate(90deg);
  }
}


/* ===== 共通HERO帯 ===== */
.tax-hero {
  position: relative;
  padding: 64px 0 40px;
  color: #fff;
  background: linear-gradient(135deg, #263238 0%, #546E7A 100%);
}

.tax-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.tax-badge {
  display: inline-block;
  background: #FFF8DC;
  color: #263238;
  border-radius: 9999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
}

.tax-title {
  margin: .5em 0 .2em;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: .02em;
}

.tax-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
  opacity: .95;
}

.tax-count {
  background: rgba(255, 255, 255, .12);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.tax-desc {
  max-width: 60ch;
  margin-top: 6px;
  opacity: .95;
}

/* ===== タクソノミー別カラー（必要に応じて調整） ===== */
.tax-hero--category {
  background: linear-gradient(135deg, #546E7A, #263238);
}

/* カテゴリ */
.tax-hero--post_tag {
  background: linear-gradient(135deg, #F28C84, #F2C879);
}

/* タグ */
.tax-hero--field {
  background: linear-gradient(135deg, #263238, #546E7A);
}

/* 分野(共通) */

/* 分野の個別タームごと（slugに応じて） */
.tax-hero--all-news {
  background: linear-gradient(135deg, #263238, #546E7A);
}

.tax-hero--all-features {
  background: linear-gradient(135deg, #F28C84, #F2C879);
}

/* 全特集＝華やか */
.tax-hero--interview {
  background: linear-gradient(135deg, #546E7A, #90A4AE);
}

.tax-hero--summary {
  background: linear-gradient(135deg, #5C4033, #F2C879);
  color: #5C4033;
}

.tax-hero--column {
  background: linear-gradient(135deg, #263238, #37474F);
}

/* モバイル微調整 */
@media (max-width:768px) {
  .tax-hero {
    padding: 40px 0 28px;
  }

  .tax-title {
    font-size: clamp(24px, 7vw, 34px);
  }
}


/* セクション間を統一（これを一番下に） */
:root {
  --section-gap: 48px;
  --gutter: 24px;
  --grid-gap: 24px;
}

/* 端の余白＆中央寄せ */
[class$="-section"]>[class$="-inner"] {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* セクション同士の上下間隔を統一 */
[class$="-section"] {
  margin-block: var(--section-gap);
}


/* ▼ 前後の記事ナビ 全体ラッパー */
.post-nav-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 5%;
  /* 45%+45%で残り10%、そのうち5%を間隔に */
  margin: 2rem 0;
}

/* ▼ 個別のボックス（前・次） */
.post-nav-box {
  flex: 0 0 45%;
  /* 幅45%固定 */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #f4f4f4;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

/* 左右で配置を調整（矢印の位置） */
.prev-article .post-nav-arrow {
  order: -1;
  margin-right: 6px;
}

/* ← を左側に */
.next-article .post-nav-arrow {
  margin-left: 6px;
}

/* → を右側に */

/* テキスト部分 */
.post-nav-text {
  flex: 1;
  min-width: 0;
}

.post-nav-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.post-nav-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* 3行で必ずカット */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

/* ================================
   タグ：つながったボタン風
   ================================ */
.post-tags.connected {
  /* 横に1列で繋げる。多い時は横スクロール */
  white-space: normal;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
  /* 上下の余白はお好みで */
}

/* ボタン（チップ） */
.post-tags.connected .tag {
  display: inline-block;
  padding: 6px 12px;
  line-height: 1;
  font-size: 14px;
  text-decoration: none;
  color: #333;
  background: #f7f7f7;
  border: 1px solid #d0d5da;
  margin: 4px;
  border-left-width: 1px;
  border-radius: 9999px;
}



/* 最初と最後の角丸で“ひとつながり”に見せる */
.post-tags.connected .tag:first-child {
  border-left-width: 1px;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.post-tags.connected .tag:last-child {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

/* ホバー／フォーカス */
.post-tags.connected .tag:hover {
  background: #ffffff;
}

.post-tags.connected .tag:focus {
  outline: 2px solid #263238;
  /* お好みで */
  outline-offset: 2px;
}

/* ダーク背景のとき読みやすく（任意） */
.header-nav~.post-tags.connected .tag {
  /* 必要なら色味を微調整 */
}


.post-thumb-caption {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  text-align: center;
  margin-top: 8px;
  padding: 0 8px;
}


/* ▼ スライダー内のキャプション（囲いナシ・目立たない色） */
.slider .post-thumb-caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: none;            /* 囲い削除 */
  font-size: 12px;
  color: #ccc;                 /* 目立たない薄めのグレー */
  padding: 0;                  /* 囲い削除なので余白もリセット */
  z-index: 5;                  /* .slide-info より下に */
  margin: 0;
  max-width: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* 読みやすさ用の影だけ残す */
}

/* グラデーションで下側を暗くする（読みやすさ補助） */
.slider .slider-img::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.15) 40%,
    rgba(0,0,0,0.00) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ▼ スマホも同じルール（特別指定ナシでOK） */
@media (max-width: 768px) {
  .slider .post-thumb-caption {
    font-size: 11px;
    max-width: 60%;
  }
}