/* 電報カタログ：サイトの見た目（藍×生成り）に合わせた一覧・ランキング・比較 */
.dpc{container-type:inline-size;--c-ai:var(--dp-ai,#1f3a5f);--c-kin:var(--dp-kin,#b08d57);--c-kin-soft:var(--dp-kin-soft,#e8dcc4);--c-cream:var(--dp-cream,#fbf8f1);--c-shu:var(--dp-shu,#c0392b);margin:1.6em 0}
.dpc-title{font-family:var(--dp-mincho,serif);font-weight:700;color:var(--c-ai);font-size:1.15em;margin:0 0 .4em}
.dpc-basis,.dpc-asof{font-size:13px;color:#666;margin:.3em 0 .8em;line-height:1.7}
.dpc-asof{margin-top:.8em}
/* 配列：列の数を固定して、どの一覧も同じ大きさ・同じ並びにそろえる（3列。cols="2|4" で変更） */
.dpc-grid{--dpc-cols:3;list-style:none!important;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(var(--dpc-cols),minmax(0,1fr));gap:16px}
.dpc-cols-2 .dpc-grid{--dpc-cols:2}
.dpc-cols-4 .dpc-grid{--dpc-cols:4}
.dpc-grid>[hidden]{display:none!important}
.dpc-card{position:relative;list-style:none!important;margin:0!important;padding:12px!important;background:#fff;border:1px solid var(--c-kin-soft);border-radius:8px;display:flex;flex-direction:column;gap:8px}
.dpc-card::before{display:none!important}
.dpc-thumb{display:block;text-align:center;background:#fff;border-radius:6px;padding:8px}
.dpc-thumb{height:170px;display:flex!important;align-items:center;justify-content:center}
.dpc-thumb img{width:150px;height:150px;max-width:100%;object-fit:contain;margin:0 auto;display:block}
.dpc-body{display:flex;flex-direction:column;gap:4px;flex:1}
.dpc-body p{margin:0!important}
.dpc-line{font-size:12px;color:#777;display:flex;justify-content:space-between;align-items:center;gap:6px}
.dpc-pr{flex:0 0 auto;font-size:11px;line-height:1.5;color:#6b625b;border:1px solid #6b625b;border-radius:3px;padding:0 4px}
.dpc-name{font-weight:700;line-height:1.5}
.dpc-name a{color:#222!important;text-decoration:none}
.dpc-name a:hover{text-decoration:underline}
.dpc-price{color:var(--c-ai);font-weight:700}
.dpc-price small{font-weight:400;color:#777;font-size:11px;margin-left:2px}
.dpc-note{font-size:13px;color:#444;line-height:1.75}
.dpc-speed{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:700;line-height:1.4;padding:.15em .6em;border-radius:4px;background:#eef3f8;color:var(--c-ai);cursor:help}
.dpc-speed-today{background:#fdeeee;color:var(--c-shu)}
.dpc-speed-balloon,.dpc-speed-days10{background:#f4efe4;color:#7a5c2e}
.dpc-who{font-size:12.5px;color:#333;line-height:1.6}
.dpc-who span{display:inline-block;font-size:11px;color:var(--c-kin);border:1px solid var(--c-kin-soft);border-radius:3px;padding:0 .4em;margin-right:.4em;line-height:1.5}
.dpc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px!important}
.dpc-tag{font-size:12px;line-height:1.5;padding:.15em .65em;border-radius:999px;border:1px solid var(--c-kin-soft);background:var(--c-cream);color:var(--c-ai)!important;text-decoration:none!important}
.dpc-tag::before{content:"#";color:var(--c-kin);margin-right:1px}
.dpc-tag:hover{border-color:var(--c-kin);background:#fff}
/* 用途と種類の絞り込み */
.dpc-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 .7em}
.dpc-filter-label{font-size:12px;font-weight:700;color:var(--c-kin);min-width:3em}
.dpc-chip{font:inherit;font-size:13px;line-height:1.4;padding:.4em .85em;border-radius:999px;border:1px solid var(--c-kin-soft);background:#fff;color:#333;cursor:pointer}
.dpc-chip small{font-size:11px;color:#888;margin-left:.35em}
.dpc-chip[aria-pressed="true"]{background:var(--c-ai);border-color:var(--c-ai);color:#fff}
.dpc-chip[aria-pressed="true"] small{color:#cfd8e3}
.dpc-result{font-size:13px;color:#555;margin:.2em 0 .8em!important;min-height:1.5em}
.dpc-more-wrap{text-align:center;margin:1em 0 0!important}
.dpc-more{font:inherit;font-size:14px;font-weight:700;padding:.6em 2em;border-radius:999px;border:1px solid var(--c-ai);background:#fff;color:var(--c-ai);cursor:pointer}
.dpc-more[hidden]{display:none}
.dpc-finder:not(.dpc-ready) .dpc-grid>li:nth-child(n+13){display:none}
.dpc-actions{margin-top:auto;display:flex;gap:6px;align-items:center;padding-top:6px}
.dpc-btn{display:inline-block;flex:1;text-align:center;background:var(--c-shu);color:#fff!important;border-radius:999px;padding:.55em .9em;font-size:14px;font-weight:700;text-decoration:none!important;border:0;cursor:pointer;line-height:1.4}
.dpc-btn:hover{filter:brightness(1.08)}
.denpo-chouden .dpc-btn,.dpc-nofav .dpc-btn{background:var(--c-ai)}
.dpc-fav{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--c-kin-soft);background:#fff;color:var(--c-shu);font-size:20px;line-height:1;cursor:pointer;padding:0}
.dpc-fav[aria-pressed="true"]{background:#fdeeee;border-color:#e8b4ae}
.dpc-rank{position:absolute;top:-8px;left:-8px;z-index:1;width:30px;height:30px;border-radius:50%;background:#8a8f98;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.dpc-rank-1{background:#b8912f}
.dpc-rank-2{background:#8e9aa6}
.dpc-rank-3{background:#a5703f}
/* 幅がせまいとき（スマホ・サイドバーの中）は2列 */
@container (max-width:620px){
  .dpc-grid,.dpc-cols-4 .dpc-grid{--dpc-cols:2;gap:10px}
  .dpc-card{padding:8px!important;gap:6px}
  .dpc-thumb{height:auto;aspect-ratio:1/1;padding:6px}
  .dpc-thumb img{width:100%;height:auto;max-width:140px}
  .dpc-tag:nth-child(n+3){display:none}
  .dpc-note{font-size:12.5px;line-height:1.7}
  .dpc-who{font-size:12px}
  .dpc-price small{display:block;margin:0}
  .dpc-actions{position:static}
  .dpc-btn{font-size:12.5px;padding:.65em .3em;white-space:nowrap}
  .dpc-fav{position:absolute;top:12px;right:12px;width:34px;height:34px;font-size:17px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .dpc-rank{top:-6px;left:-6px}
}
@container (min-width:621px) and (max-width:820px){
  .dpc-cols-4 .dpc-grid{--dpc-cols:3}
}
@media (max-width:600px){
  .dpc-grid{--dpc-cols:2;gap:10px}
  .dpc-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .dpc-chip{white-space:nowrap;flex:0 0 auto}
  .dpc-note{font-size:12.5px}
  .dpc-card{padding:8px!important}
  .dpc-actions{gap:4px}
  .dpc-price small{display:block;margin:0}
}

/* 一覧の下に出る「お気に入りを比べる」 */
.dpc-bar{position:fixed;right:16px;bottom:16px;z-index:999;background:var(--dp-ai,#1f3a5f);color:#fff!important;border-radius:999px;padding:.7em 1.2em;font-weight:700;font-size:14px;text-decoration:none!important;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.dpc-bar[hidden]{display:none}

/* 比較ページ */
.dpc-empty,.dpc-note-box{background:var(--c-cream);border:1px solid var(--c-kin-soft);border-radius:8px;padding:14px 16px;margin:0 0 1em!important}
.dpc-compare{overflow-x:auto}
.dpc-compare table{width:100%;border-collapse:collapse;min-width:520px}
.dpc-compare th,.dpc-compare td{border-bottom:1px solid var(--c-kin-soft);padding:10px 8px;text-align:left;vertical-align:middle}
.dpc-compare tr.dpc-card{display:table-row;position:static;padding:0!important;border:0;background:none}
.dpc-cmp-name{display:flex;align-items:center;gap:10px;color:#222!important;text-decoration:none;font-weight:700}
.dpc-cmp-name img{width:72px;height:72px;object-fit:contain;background:#fff;border:1px solid var(--c-kin-soft);border-radius:6px}
.dpc-num{white-space:nowrap;font-weight:700;color:var(--c-ai)}
.dpc-cmp-act{display:flex;gap:6px;align-items:center;min-width:180px}
.dpc-share{margin-top:1.2em;padding:14px 16px;border:1px dashed var(--c-kin);border-radius:8px}
.dpc-share p{margin:0 0 .6em!important}
.dpc-share .dpc-btn{flex:none;background:var(--c-ai)}
.dpc-share .dpc-line{background:#06c755}
