@charset "UTF-8";
    /* =========================================================
       スマホ向けテンプレート（最新Web標準 / セマンティック構造）
       - ヘッダー / メイン / サイドバー / フッターを含む
       - 3枚の写真を縦並び表示（タップしやすいUI）
       - 1枚目: PDFをモーダル表示
       - 2枚目: YouTubeをモーダル表示、終了(ENDED)で自動クローズ
       - 3枚目: 画像拡大をモーダル表示、拡大画像クリックで閉じる
       ========================================================= */
    
    
    /* =========================================================
       モーダル（共通）
       - overlayクリック / ESC で閉じる
       - PDF/YouTube/画像拡大を表示
       ========================================================= */
    .modal{
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      z-index: 1000;
      padding: 14px;
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
      padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    .modal.is-open{ display: grid; }

    .overlay{
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.72);
    }

    .dialog{
      position: relative;
      width: min(980px, calc(100vw - 28px));
      height: min(84vh, 760px);
      border-radius: 16px;
      overflow: hidden;
      background: #111;
      box-shadow: 0 24px 80px rgba(0,0,0,.55);
      z-index: 1;
      display: grid;
      grid-template-rows: auto 1fr;
    }

    .dialog-header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 10px;
      background: rgba(0,0,0,.55);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .dialog-title{
      margin: 0;
      font-size: 13px;
      color: rgba(255,255,255,.92);
      letter-spacing: .02em;
      padding-left: 6px;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .close-btn{
      appearance: none;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.08);
      color: #fff;
      border-radius: 999px;
      height: 38px;
      min-width: 76px;
      padding: 0 14px;
      cursor: pointer;
      font-size: 13px;
      touch-action: manipulation;
    }
    .close-btn:active{ transform: scale(0.99); }

    .dialog-body{
      background: #000;
      display: grid;
      place-items: center;
      position: relative;
    }

    /* PDF/YouTube iframe */
    .frame{
      width: 100%;
      height: 100%;
      border: 0;
      background: #000;
    }

    /* 画像拡大 */
    .lightbox-img{
      max-width: 100%;
      max-height: 100%;
      display: block;
      cursor: pointer;           /* 要件：画像クリックで閉じる */
      user-select: none;
      -webkit-user-drag: none;
      touch-action: manipulation;
    }