<style>
  /* ページ全体の余白をゼロにして、勝手な空白を防ぐ */
  html, body {
    margin: 0;
    padding: 0;
    background-color: #fdf8f0; /* ラ・オハナ風の背景色 */
    overflow: hidden; /* 内部での不要なスクロールを禁止 */
  }

  .main-container {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .main-title {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #008b9b;
    margin: 0 0 10px 0;
    position: relative;
    padding-bottom: 10px;
  }
  .main-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: #f39800;
    border-radius: 2px;
  }

  /* 店舗カードの設定 */
  .shop-card {
    background: #ffffff;
    border: 1px solid #e0dacc;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(184, 174, 153, 0.2);
    padding: 12px 5px;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
  }
 
  .shop-name {
    font-size: 17px;
    font-weight: bold;
    color: #444;
    margin-bottom: 8px;
    display: block;
  }

  /* マトカの表示エリア：下のボタンを隠す */
  .iframe-mask {
    width: 100%;
    height: 90px; /* ここを絞ることで下のボタンを隠す */
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .iframe-wrapper {
    width: 392px; /* マトカ標準幅 */
    position: absolute;
    top: 0;
    transform-origin: top center;
  }

  /* ★スマホで縮小した際に生まれる「お化け余白」を解消 */
  @media (max-width: 420px) {
    .iframe-mask {
      height: 78px; /* 縮小に合わせて表示高さをさらに絞る */
    }
    .iframe-wrapper {
      transform: scale(0.85);
    }
    .main-container { gap: 10px; padding: 10px 5px; }
  }

  iframe { border: none; }
</style>

<div class="main-container">
  <div class="main-title">【現在の混雑状況】</div>

  <div class="shop-card">
    <span class="shop-name">ラ・オハナ 横浜本牧店</span>
    <div class="iframe-mask">
      <div class="iframe-wrapper">
        <iframe src="https://option.junbanmachi.jp/embed/?id=4507&apiKey=3TXpln9n9cmfgCpsx0bxIB8PDuL0dtnFk1af4jtWW66WA2XbGROshm5tx1Wh&backgroundColor=FFFFFF&borderColor=FFFFFF&borderWidth=0&fontColor=333333&fontSize=16&showRemainTime=true" height="120" width="392"></iframe>
      </div>
    </div>
  </div>

  <div class="shop-card">
    <span class="shop-name">ラ・オハナ 西千葉店</span>
    <div class="iframe-mask">
      <div class="iframe-wrapper">
        <iframe src="https://option.junbanmachi.jp/embed/?id=4510&apiKey=5AGFmwm6VdTkbAEoSO3dKWPzdkrt9qPXS407Zd7QL44NVpCcxlwqqapDkDCN&backgroundColor=FFFFFF&borderColor=FFFFFF&borderWidth=0&fontColor=333333&fontSize=16&showRemainTime=true" height="120" width="392"></iframe>
      </div>
    </div>
  </div>

  <div class="shop-card">
    <span class="shop-name">ラ・オハナ 南砂店</span>
    <div class="iframe-mask">
      <div class="iframe-wrapper">
        <iframe src="https://option.junbanmachi.jp/embed/?id=4508&apiKey=XMdMk5TK8fhMCNQOJr5ycpnQP1JyqJSu5lWjiIVL3im19fuqsivXkBRUBHdI&backgroundColor=FFFFFF&borderColor=FFFFFF&borderWidth=0&fontColor=333333&fontSize=16&showRemainTime=true" height="120" width="392"></iframe>
      </div>
    </div>
  </div>

  <div class="shop-card">
    <span class="shop-name">ラ・オハナ 府中新町店</span>
    <div class="iframe-mask">
      <div class="iframe-wrapper">
        <iframe src="https://option.junbanmachi.jp/embed/?id=4509&apiKey=iFs0HSDKqvwB6dhFHy8CBgHbEYWdSUNWQdB4GJSr03NM1dPLUbUUUzaKBXWM&backgroundColor=FFFFFF&borderColor=FFFFFF&borderWidth=0&fontColor=333333&fontSize=16&showRemainTime=true" height="120" width="392"></iframe>
      </div>
    </div>
  </div>
</div>