/* Twittrend visual polish: keep layout/features unchanged */
body {
  background: #f8f9fc;
  color: #343a40;
  line-height: 1.6;
}

.content-wrapper {
  background: linear-gradient(180deg, #fffef8 0%, #f8f9fc 220px);
}

.main-header.navbar {
  box-shadow: 0 2px 10px rgba(31, 45, 61, 0.08);
}

.main-sidebar .brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.card.card-outline {
  border: 1px solid #e8ebf2;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(33, 37, 41, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card.card-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(33, 37, 41, 0.1);
}

.card .card-header {
  border-bottom: 1px solid #eef1f6;
  background-color: #fffdf3;
}

.card .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

p.trend {
  margin-bottom: 0.1rem;
  line-height: 1.45;
}

p.trend > span {
  color: #6c757d;
  font-weight: 600;
  margin-right: 0.2rem;
}

p.trend a {
  color: #1f2d3d;
  text-decoration: none;
  word-break: break-word;
}

p.trend a:hover {
  color: #0c63e7;
  text-decoration: underline;
}

p.trend-tweet-volum {
  color: #6c757d;
  font-size: 0.82rem;
  margin-bottom: 0.42rem;
}

.trend-prev {
  display: block;
  margin-bottom: 0.4rem;
}

.trend-prev a {
  color: #5f6974;
}

.trend-prev a:hover {
  color: #0c63e7;
}

.btn.btn-warning {
  border-radius: 10px;
  font-weight: 600;
}

.btn.btn-warning:hover {
  box-shadow: 0 5px 14px rgba(243, 156, 18, 0.32);
}

button[id^="more_btn_"] {
  border-radius: 10px;
  margin-top: 0.25rem;
}

/* 広告枠: ohtanid-laravel public/css/style.css の .ad-slot と同系統 */
.ad-slot,
.ad-slot-top-pc,
.ad-slot-top-sp,
.ad-slot-bottom,
.ad-slot-footer,
.ad-slot-native-fluid,
li.ad-slot-inlist,
li.ad-slot-inlist-tall,
li.ad-slot-horizontal,
li.ad-slot-native-top-fluid {
  background: rgba(255, 255, 255, 0.8);
  border: 1px dashed rgba(2, 53, 133, 0.25);
  border-radius: 0.8rem;
  padding: 0.75rem;
  box-sizing: border-box;
  /* flex 子の最小幅既定 + 広告 iframe のはみ出しを枠内に収める */
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* AdSense: 差し込まれる iframe がビューワー幅を超えないようにする（枠内に収める） */
ins.adsbygoogle {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

ins.adsbygoogle iframe {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Laravel 側と同じ .ad-slot のみ置いたときの既定 min-height（ad-slot-* は下記で上書き） */
.ad-slot {
  min-height: 120px;
}

@media (min-width: 576px) {
  .ad-slot {
    min-height: 150px;
  }
}

@media (min-width: 768px) {
  .ad-slot {
    min-height: 170px;
  }
}

@media (min-width: 992px) {
  .ad-slot {
    min-height: 200px;
  }
}

/* --- AdSense: 余白の統一 + CLS軽減 --- */
/* min-height は「下限」のため、それより背の高いクリエイティブだと枠がまだ伸びる。
   レスポンシブ(auto)でよく出る 300〜336 系より上に下限を取り、ins 側も同じく確保する。 */
.ad-slot-top-pc,
.ad-slot-top-sp {
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.ad-slot-top-pc {
  min-height: 420px;
}

.ad-slot-top-sp {
  min-height: 400px;
}

.ad-slot-top-pc ins.adsbygoogle,
.ad-slot-top-sp ins.adsbygoogle {
  min-height: 360px;
}

.ad-slot-bottom {
  min-height: 380px;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  box-sizing: border-box;
}

.ad-slot-bottom ins.adsbygoogle {
  min-height: 320px;
}

.ad-slot-footer {
  text-align: center;
  margin-top: 0.75rem;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
  min-height: 300px;
}

.ad-slot-footer ins.adsbygoogle {
  min-height: 260px;
}

.ad-slot-inlist {
  text-align: center;
  list-style: none;
  min-height: 280px;
  box-sizing: border-box;
}

.ad-slot-inlist ins.adsbygoogle {
  min-height: 250px;
}

.ad-slot-inlist-tall {
  min-height: 360px;
}

.ad-slot-inlist-tall ins.adsbygoogle {
  min-height: 320px;
}

.ad-slot-horizontal {
  text-align: center;
  margin-bottom: 10px;
  min-height: 120px;
  box-sizing: border-box;
}

.ad-slot-horizontal ins.adsbygoogle {
  min-height: 90px;
}

.ad-slot-native-fluid {
  text-align: center;
  margin-top: 0;
  padding-bottom: 1.25rem;
  min-height: 380px;
  box-sizing: border-box;
}

.ad-slot-native-fluid ins.adsbygoogle {
  min-height: 320px;
}

.ad-slot-native-top {
  padding-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  min-height: 120px;
  box-sizing: border-box;
}

.ad-slot-native-top-fluid {
  padding-bottom: 10px;
  min-height: 280px;
  box-sizing: border-box;
}

.ad-slot-native-top-fluid ins.adsbygoogle {
  min-height: 240px;
}

/* モバイルで本文が左に細く寄る（半分幅＋右に空白）対策:
   AdminLTE の sidebar 用 margin / 幅が狭い画面に残ると、本文エリアだけが狭く見える。 */
@media (max-width: 991.98px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body.layout-fixed.sidebar-mini .wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.layout-fixed.sidebar-mini .main-header,
  body.layout-fixed.sidebar-mini .main-footer,
  body.layout-fixed.sidebar-mini .content-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.layout-fixed.sidebar-mini .content-wrapper > .content,
  body.layout-fixed.sidebar-mini .content-wrapper > .content > .container-fluid {
    max-width: 100%;
  }
}

.main-footer {
  border-top: 1px solid #e9edf5;
  background-color: #ffffff;
  color: #5f6974;
}

.main-footer a {
  transition: color 0.15s ease;
}

.main-footer a:hover {
  color: #0c63e7 !important;
}

@media (max-width: 767.98px) {
  .show_sp h5 {
    font-size: 1rem;
    margin-bottom: 0;
  }

  .card .card-header {
    padding: 0.7rem 0.9rem;
  }

  .card .card-body {
    padding: 0.75rem 0.9rem;
  }

  .main-footer .mt-5 {
    margin-top: 2rem !important;
  }

  /* 狭い画面では縦長ユニットが出やすいので SP 枠はさらに多めに確保 */
  .ad-slot-top-sp {
    min-height: 440px;
  }

  .ad-slot-top-sp ins.adsbygoogle {
    min-height: 400px;
  }

  .ad-slot-bottom {
    min-height: 400px;
  }

  .ad-slot-bottom ins.adsbygoogle {
    min-height: 360px;
  }

  .ad-slot-native-fluid {
    min-height: 360px;
  }

  .ad-slot-native-fluid ins.adsbygoogle {
    min-height: 300px;
  }

  /* 広告だけ入っている .row の負マージンを打ち消し、上のボタン行と同じく左右に余白を取る */
  .container-fluid .row:has(> [class*="col-"].ad-slot-top-sp),
  .container-fluid .row:has(> [class*="col-"].ad-slot-top-pc),
  .container-fluid .row:has(> [class*="col-"].ad-slot-bottom) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}