/* Delta Cash gallery v3 — 無料ギャラリー詳細の表示層（A/B arm c・リッチ版）
   2026-09-12: 承認済みモック（cash_after.html）の CSS をそのまま移植し、ライトボックスを追加。
   2026-09-14: 器の幅を全ブロック 822px に統一（PCで 790/900/1400 が混在し左右端が揃っていなかった）。
   画像は「縮小のみ・拡大と切り取りは禁止」が原則。max-width は実寸を上限にすること。
     topImage    790x444
     image_thumb 130x195 */

:root{--dc-pink:#e91e8c;--dc-bg:#f2f2f2;--dc-card-bg:#fff;--dc-text:#222;--dc-text-muted:#777;--dc-radius:8px;}
*{box-sizing:border-box;}
body.dcg a{text-decoration:none;color:inherit;}
body.dcg{margin:0;background-color:var(--dc-bg);font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--dc-text);}

/* topImage(790x444)のカード。列幅は最大でも実寸未満なので拡大しない */
/* 器は全ブロック共通 822px（topImage 790 ＋ 左右 padding 16）。左右端をヒーローと揃える */
.dcg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:0 16px;max-width:822px;margin:12px auto 0;}
.dcg-card{background:var(--dc-card-bg);border-radius:var(--dc-radius);overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;flex-direction:column;}
.dcg-card a{display:block;color:inherit;}
.dcg-card .dcg-thumb-wrap{position:relative;display:block;width:100%;overflow:hidden;background:#ddd;}
.dcg-card .dcg-thumb-wrap img{width:100%;height:auto;display:block;}
/* display:block が無いと inline の行ボックスとして扱われ、上の画像と重なる */
.dcg-card .dcg-meta{display:block;padding:8px 10px 10px;}
.dcg-card .dcg-title{font-size:13px;font-weight:600;line-height:1.3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dcg-card .dcg-date{display:block;font-size:11px;color:var(--dc-text-muted);}
.dcg-footer{text-align:center;font-size:11px;color:var(--dc-text-muted);padding:16px;}
.dcg-detail-head{background:#fff;padding:16px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.dcg-detail-head img.dcg-logo{height:32px;}
.dcg-detail-head h1{font-size:18px;margin:8px 0 0;font-weight:600;}
.dcg-section-title{max-width:822px;margin:24px auto 8px;padding:0 16px;font-size:16px;font-weight:700;}
.dcg-cta{display:flex;justify-content:center;padding:16px;}
.dcg-cta a{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:24px;background:var(--dc-pink);color:#fff;font-weight:700;font-size:15px;}

/* 1) 画像の拡大を止める
      topImage は実寸 790x444、image_thumb は実寸 130x195。822 = 790 + 左右padding16*2 */
.dcg-top-link{display:block;max-width:822px;margin:16px auto 0;padding:0 16px;}
.dcg-top-link img{width:100%;max-width:790px;height:auto;border-radius:var(--dc-radius);display:block;margin:0 auto;}
.dcg-grid.dcg-grid--thumbs{grid-template-columns:repeat(auto-fill,130px);gap:12px 35px;justify-content:start;}
.dcg-grid.dcg-grid--thumbs img{max-width:130px;}

/* 2) 作品情報 */
.dcg-meta-box{max-width:822px;margin:14px auto 0;padding:0 16px;}
.dcg-meta-box dl{margin:0;background:#fff;border-radius:var(--dc-radius);box-shadow:0 1px 3px rgba(0,0,0,.08);padding:4px 14px;}
.dcg-meta-box div{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid #eee;font-size:14px;line-height:1.5;}
.dcg-meta-box div:last-child{border-bottom:none;}
.dcg-meta-box dt{width:6.5em;flex:none;color:var(--dc-text-muted);font-size:13px;margin:0;}
.dcg-meta-box dd{margin:0;font-weight:600;}
.dcg-meta-box .dcg-tags{font-weight:400;color:#444;font-size:13px;}

/* 3) CTA（作品名入り・注記つき） */
.dcg-offer{max-width:822px;margin:16px auto 0;padding:0 16px;text-align:center;}
.dcg-offer .dcg-offer-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 30px;border-radius:26px;background:var(--dc-pink);color:#fff;font-weight:700;font-size:16px;line-height:1.35;}
.dcg-offer .dcg-offer-note{display:block;margin-top:9px;font-size:13px;color:var(--dc-text-muted);}

/* 4) 見出しの補助行 */
.dcg-detail-head .dcg-model{display:block;margin-top:4px;font-size:13px;color:var(--dc-text-muted);font-weight:400;}

/* ライトボックス（サンプル拡大。依存ゼロの lightbox-v3.js） */
.dcg-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:1000;}
.dcg-lightbox.dcg-open{display:flex;}
.dcg-lightbox img{max-width:92vw;max-height:88vh;object-fit:contain;}
.dcg-lightbox .dcg-lb-close,
.dcg-lightbox .dcg-lb-prev,
.dcg-lightbox .dcg-lb-next{position:absolute;color:#fff;background:rgba(0,0,0,.4);border:none;font-size:20px;cursor:pointer;border-radius:50%;width:44px;height:44px;}
.dcg-lightbox .dcg-lb-close{top:16px;right:16px;}
.dcg-lightbox .dcg-lb-prev{left:16px;top:50%;transform:translateY(-50%);}
.dcg-lightbox .dcg-lb-next{right:16px;top:50%;transform:translateY(-50%);}

/* d) モバイル追従CTA（派生テスト arm d のみ描画）。ヒーロー直下の .dcg-offer が画面外に出たら表示 */
.dcg-sticky{display:none;}
@media (max-width:767px){
  .dcg-sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:10px;
    padding:10px 12px;background:#fff;border-top:1px solid #e5e5e5;box-shadow:0 -2px 8px rgba(0,0,0,.08);
    transform:translateY(110%);transition:transform .2s;}
  .dcg-sticky.is-on{transform:none;}
  .dcg-sticky .dcg-sticky-t{flex:1;font-size:12px;line-height:1.4;color:var(--dc-text-muted);}
  .dcg-sticky .dcg-sticky-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    padding:0 18px;border-radius:22px;background:var(--dc-pink);color:#fff;font-weight:700;font-size:14px;white-space:nowrap;}
  body.dcg.dcg-has-sticky{padding-bottom:72px;}
}

@media (max-width:480px){
  .dcg-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;padding:0 16px;}
  /* サムネは3列固定。auto-fill だと上限130pxが優先されて2列に落ちる */
  .dcg-grid.dcg-grid--thumbs{grid-template-columns:repeat(3,minmax(0,130px));gap:8px;padding:0 16px;justify-content:space-between;}
}