/* ===================================

   SP（横幅 719pxまで）

=================================== */

/* --------------------
  <div class="tb-p-brand-ranking-iframe-container">
  
  iframeを囲う 外側div です
-------------------- */

/* @media 719px以下の指定 */
/* iframeの外枠コンテナです。 */
/* .tb-p-brand-ranking-iframe-container {
  width: 100%;
  max-width: calc(100% + 32px);
} */



/* スマートフォンでのぶち抜き */

@media (max-width: 751px) {/* 内側iframeの@media は max-width: 719px のとき */

  .tb-p-brand-ranking-iframe-container {/* iframeの外枠コンテナです。 */
      margin-left: -16px;
      margin-right: -16px;
      
      /* width: 100%; */

      width: calc(100% + 32px);
      /* ページ幅に16px × 2を加算 */
  }

  /* iframe 自体の指定となります。 */
  .tb-p-brand-ranking-iframe-10,/* iframe */
  .tb-p-brand-ranking-iframe-5/* iframe */{
    display: block;
    width: 100vw;
    /* 親要素に合わせてフル幅に。100%ではうまく行かないか */

    /* width: 100%; */

    max-width: 719px;
    height: 315px;
  }
}


/* @media (min-width: 720px) { */
@media (min-width: 752px) {

  /* PCではぶち抜きを無効にする（親要素の X方向 padding の適用を受ける） */
  .tb-p-brand-ranking-iframe-container {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
  }

  /* iframe自体の指定となります。 */
  .tb-p-brand-ranking-iframe-10,
  .tb-p-brand-ranking-iframe-5 {
    display: block;
    width: 100%;/* 親要素に合わせてフル幅に */
    height: clamp(480px, calc(480px + 10vw), 600px);
  }
}