/* happyell interaction / content-visibility css */
/*　最後に追加する */
/* 固定ナビの“箱”はタップを受けない。中のリンクだけ受ける */
.nv-horizontal,
.nv-horizontal2 {
  pointer-events: none !important;
}

.nv-horizontal a,
.nv-horizontal2 a,
.nv-horizontal li,
.nv-horizontal2 li,
.nv-mask {
  pointer-events: auto !important;
}

/* ボタン系リンクは a 側をクリック本体に固定 */
.q_button { cursor: default !important; }
.q_button a{
  display: flex !important;
  width: 100% !important;
  min-height: 44px !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* スマホでは hover/focus による色変化を起こさない（1回目タップ消費を防ぐ） */
@media (hover: none) {
  .q_button:hover,
  .q_button:focus,
  .q_button:focus-within,
  a:hover,
  a:focus {
    background: inherit !important;
    box-shadow: none !important;
    color: inherit !important;
  }
}

/* 押した感は active で出す（スマホ向け） */
.q_button a:active { transform: translateY(1px); }

a, button {
  touch-action: manipulation;
}
@media (max-width: 768px) {
  * {
    -webkit-transform: none !important;
  }
}

/* ==================================================
   下部コンテンツの描画遅延
   目的：記事下ランキング・著者枠・関連記事のStyle & Layout削減
   追加日：2026-04-25
================================================== */

@supports (content-visibility: auto) {

  /* 記事下の人気ランキング・イベントランキング */
  main #ninkiranking {
    content-visibility: auto;
    contain-intrinsic-size: 0 700px;
  }

/* NG回避：ランキング内の個別liには遅延をかけない */
#ninkiranking .wpp-list > li,
#ninkiranking .p-widget-list__item {
  content-visibility: visible !important;
  contain: none !important;
}



  /* TCD標準の関連記事エリア */
  .p-entry__related {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
  }

  /* TCD標準の著者枠 */
  .p-author__box {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
  }

  /* Simple Author Box系の著者枠 */
  .saboxplugin-wrap {
    content-visibility: auto;
    contain-intrinsic-size: 0 360px;
  }

  /* イベント詳細ページの関連イベント */
  .event-related__grid,
  .event-embed-cards,
  .spot-events__grid {
    content-visibility: auto;
    contain-intrinsic-size: 0 700px;
  }
}

/* ==================================================
   content-visibility をスマホだけに限定
   PCでは無効化、ランキングには常に当てない
================================================== */

@supports (content-visibility: auto) {

  /* PCでは content-visibility を無効化 */
  @media (min-width: 769px) {
    main #ninkiranking,
    main #ninkiranking .wpp-list,
    main #ninkiranking .bloghpp-list,
    main #ninkiranking .bloghpp-listli,
    .p-entry__related,
    .p-author__box,
    .saboxplugin-wrap,
    .p-entry__inner > .bloghpp-list,
    .p-entry__body > .bloghpp-list,
    .event-related__grid,
    .event-embed-cards,
    .spot-events__grid {
      content-visibility: visible !important;
      contain: none !important;
    }
  }

  /* スマホだけ高速化 */
  @media (max-width: 768px) {

    /* ランキングは対象外。順位崩れ防止 */
    main #ninkiranking,
    main #ninkiranking .wpp-list,
    main #ninkiranking .bloghpp-list,
    main #ninkiranking .bloghpp-listli,
    #ninkiranking .wpp-list > li,
    #ninkiranking .p-widget-list__item {
      content-visibility: visible !important;
      contain: none !important;
    }

    /* 関連記事 */
    .p-entry__related {
      content-visibility: auto !important;
      contain-intrinsic-size: 0 500px;
    }

    /* 著者枠 */
    .p-author__box {
      content-visibility: auto !important;
      contain-intrinsic-size: 0 300px;
    }

    /* Simple Author Box */
    .saboxplugin-wrap {
      content-visibility: auto !important;
      contain-intrinsic-size: 0 360px;
    }

    /* イベント詳細ページの関連イベント */
    .event-related__grid,
    .event-embed-cards,
    .spot-events__grid {
      content-visibility: auto !important;
      contain-intrinsic-size: 0 700px;
    }
  }
}

/* ==================================================
   latest_switch_150 第一段階：スマホだけ少しスクロール後に表示
   目的：初期表示の邪魔を避け、スクロール後に自然に表示する
   追加日：2026-04-25
================================================== */

@media (max-width: 768px) {
  .latest-switch-scroll-reveal {
    opacity: 0;
    transform: translateY(115%) !important;
    -webkit-transform: translateY(115%) !important;
    pointer-events: none;
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
  }

  .latest-switch-scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
    pointer-events: auto;
  }
}

@media (min-width: 769px) {
  .latest-switch-scroll-reveal {
    opacity: 1;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .latest-switch-scroll-reveal {
    transition: none !important;
  }
}