/* 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;
  content-visibility: auto;
  contain-intrinsic-size: 560px;
}

.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;
}

.content .container-fluid {
  max-width: 1380px;
}

.header-image-rgba h1 {
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

h4.mt-4 > a.text-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  text-decoration: none;
}

h4.mt-4 > a.text-dark:hover {
  color: #0c63e7 !important;
}

p.trend {
  margin-bottom: 0.15rem;
  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.55rem;
}

.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;
  letter-spacing: 0.01em;
}

.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;
}

#time.form-control {
  border-radius: 10px;
  border-color: #dde3ee;
  box-shadow: none;
}

#time.form-control:focus {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.14rem rgba(255, 193, 7, 0.18);
}

.card .card-header .float-right {
  font-size: 0.82rem;
  color: #6c757d !important;
}

.card .card-body ul.list-unstyled > li {
  border-bottom: 1px solid #f0f2f6;
  padding-bottom: 0.2rem;
}

.card .card-body ul.list-unstyled > li:last-child {
  border-bottom: 0;
}

/* トレンドカードの見た目を一段モダンに */
.card.card-outline {
  overflow: hidden;
}

.card .card-header {
  padding: 0.8rem 0.95rem;
}

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

.card .card-body ul.list-unstyled > li:not(.ad-slot-inlist):not(.ad-slot-inlist-tall):not(.ad-slot-horizontal):not(.ad-slot-native-top-fluid) {
  padding-top: 0.15rem;
  padding-bottom: 0.4rem;
  margin-bottom: 0.25rem;
  transition: background-color 0.15s ease;
}

.card .card-body ul.list-unstyled > li:not(.ad-slot-inlist):not(.ad-slot-inlist-tall):not(.ad-slot-horizontal):not(.ad-slot-native-top-fluid):hover {
  background-color: #f8faff;
}

p.trend > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.65rem;
  margin-right: 0.45rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #f2f5fb;
  color: #49566a;
  font-size: 0.78rem;
  font-weight: 700;
}

p.trend a {
  font-weight: 600;
}

p.trend-tweet-volum {
  margin-left: 2.15rem;
}

.trend-prev a {
  font-size: 0.78rem;
}

/* 広告枠: 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;
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

/* 収益寄り: 枠を明示して誤タップを減らし、クリック品質を安定化 */
.ad-slot-top-pc::before,
.ad-slot-top-sp::before,
.ad-slot-bottom::before,
.ad-slot-footer::before,
li.ad-slot-inlist::before,
li.ad-slot-inlist-tall::before,
li.ad-slot-horizontal::before,
li.ad-slot-native-top-fluid::before {
  content: "広告";
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: rgba(2, 53, 133, 0.08);
  color: #35507a;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 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-top: 0.75rem;
  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;
  }

  .header-image-rgba h1 {
    font-size: 1.75rem;
  }

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

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

  .card .card-body ul.list-unstyled > li:not(.ad-slot-inlist):not(.ad-slot-inlist-tall):not(.ad-slot-horizontal):not(.ad-slot-native-top-fluid) {
    padding-bottom: 0.35rem;
    margin-bottom: 0.2rem;
  }

  p.trend > span {
    min-width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.35rem;
    font-size: 0.74rem;
  }

  p.trend a {
    font-size: 0.95rem;
  }

  p.trend-tweet-volum {
    margin-left: 1.95rem;
    font-size: 0.78rem;
  }

  .card .card-header .card-title {
    display: block;
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .card .card-header .float-right {
    float: none !important;
    display: block;
    margin-top: 0 !important;
  }

  .trend-prev {
    float: none !important;
    display: block;
    text-align: right;
    margin-bottom: 0.35rem;
  }

  .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;
  }

  /* 収益寄り密度最適化（モバイル）:
     1画面内の広告密度を下げて、視認性とクリック品質を優先 */
  .card + .ad-slot-footer {
    display: none;
  }

  /* 下部枠は残すが、本文との誤タップを避けるため余白を増やす */
  .ad-slot-bottom {
    margin-top: 1rem;
    margin-bottom: 1.75rem;
  }

  /* インコンテンツ広告は視認性を確保しつつ、本文と間隔を取る */
  li.ad-slot-inlist,
  li.ad-slot-inlist-tall,
  li.ad-slot-horizontal,
  li.ad-slot-native-top-fluid {
    margin-top: 0.45rem;
    margin-bottom: 0.55rem;
  }

  /* 広告だけ入っている .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;
  }
}