*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;background:#f5f5f3;min-height:100vh;color:#1a1a1a;font-size:15px;line-height:1.7}
.pw{max-width:720px;margin:0 auto;padding:2rem 1rem 4rem}
.site-header {
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 20px;
  margin-bottom: 28px;
}
.site-logo {
  display: inline-block;
  line-height: 0;
}
.ph h1{font-size:22px;font-weight:700;margin-bottom:.5rem}
.ph .lead{font-size:15px;color:#444;line-height:1.75;margin-bottom:1.75rem}
.tc{background:#fff;border:1px solid #ddd;border-radius:14px;padding:1.5rem;margin-bottom:2rem}

/* ---- ドロップエリア ---- */
#drop{border:2px dashed #bbb;border-radius:10px;padding:2rem 1rem;text-align:center;cursor:pointer;background:#fafafa;margin-bottom:1.25rem;transition:background .15s,border-color .15s}
#drop.over{background:#eef4ff;border-color:#6699cc}
#drop .dp{font-size:15px;color:#333;font-weight:500;margin-top:.4rem}
#drop .ds{font-size:14px;color:#888;margin-top:.2rem}

/* ---- 品質スライダー ---- */
.cr{display:flex;align-items:center;gap:12px;margin-bottom:.5rem}
.cr label{font-size:14px;color:#555;white-space:nowrap;font-weight:500}
input[type=range]{flex:1;accent-color:#1a1a1a}
#qo{font-size:15px;font-weight:700;min-width:28px;text-align:right}
.qn{font-size:13px;color:#888;margin-bottom:.9rem}
#presets{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:1.4rem}
#presets .pl{font-size:13px;color:#888}
.pb{font-size:13px;padding:5px 12px;border-radius:6px;border:1px solid #ccc;background:#fff;cursor:pointer;color:#1a1a1a;font-weight:500}
.pb:hover{background:#f0f0ee}
.pb.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}

/* ---- アクションエリア ---- */
#aa{display:none;margin-bottom:1.1rem}
#sm{font-size:14px;font-weight:600;color:#1e7e3e;padding:.7rem .9rem;background:#e6f4ec;border:1px solid #b8ddb0;border-radius:8px;margin-bottom:.65rem}
.abtns{display:flex;flex-direction:column;gap:.45rem}
#zb{width:100%;padding:.75rem;border-radius:8px;border:none;background:#1a1a1a;cursor:pointer;font-size:15px;font-weight:600;color:#fff}
#zb:hover{background:#333}
#zb:disabled{opacity:.5;cursor:default}
#ab{width:100%;padding:.7rem;border-radius:8px;border:1px solid #aaa;background:#fff;cursor:pointer;font-size:14px;color:#1a1a1a}
#ab:hover{background:#f5f5f3}
#cb{width:100%;padding:.65rem;border-radius:8px;border:1px solid #e0b0b0;background:#fff;cursor:pointer;font-size:14px;color:#c0392b}
#cb:hover{background:#fdecea}

/* ---- ファイルリスト ---- */
.lh{font-size:13px;color:#888;margin-bottom:.45rem}
#list{display:flex;flex-direction:column;gap:8px}
#empty{font-size:14px;color:#aaa;text-align:center;padding:1.25rem}
.item{background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;overflow:hidden}
.ih{display:flex;align-items:center;gap:8px;padding:.7rem 1rem}
.iname{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:500}
.badge{font-size:12px;padding:3px 9px;border-radius:5px;white-space:nowrap;font-weight:500}
.bw{background:#f0f0ee;color:#888}
.bok{background:#e6f4ec;color:#1e7e3e}
.ber{background:#fdecea;color:#c0392b}
.dlt{font-size:13px;padding:4px 12px;border-radius:5px;border:1px solid #ccc;background:#fff;cursor:pointer;color:#1a1a1a}
.dlt:disabled{opacity:.4;cursor:default}

/* ---- ファイル別プレビュー ---- */
.pvt{font-size:13px;color:#1a6fb5;background:none;border:none;cursor:pointer;padding:0 1rem .55rem;display:none}
.pvt:hover{text-decoration:underline}
.pvp{display:none;padding:0 1rem 1rem}
.pvi{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
.pvb p{font-size:13px;font-weight:600;color:#555;margin-bottom:.3rem}
.pvb img{width:100%;border-radius:6px;border:1px solid #ddd;display:block;background:#f0f0ee}
.pvb .sl{font-size:13px;color:#888;margin-top:.25rem}

/* ---- セクション共通 ---- */
.sec{margin-bottom:2.5rem}
.sec h2{font-size:18px;font-weight:700;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:2px solid #e8e8e8}
.sec p{font-size:15px;color:#333;margin-bottom:.7rem;line-height:1.75}
.sec ul{padding-left:1.4em;font-size:15px;color:#333;line-height:1.75}
.sec li{margin-bottom:.35rem}

/* ---- 品質サンプルグリッド ---- */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.75rem}
@media(max-width:520px){.sgrid{grid-template-columns:repeat(2,1fr)}}
.sbox{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;transition:box-shadow .15s}
.sbox:hover{box-shadow:0 2px 10px rgba(0,0,0,.12)}
.siw{width:100%;aspect-ratio:4/3;background:#e8e8e8;overflow:hidden;position:relative}
.siw img{width:100%;height:100%;object-fit:cover;display:block}
.siw .zoom-hint{position:absolute;bottom:5px;right:6px;font-size:11px;background:rgba(0,0,0,.45);color:#fff;padding:2px 6px;border-radius:4px;pointer-events:none}
.sinfo{padding:.5rem .65rem}
.sinfo .ql{font-size:14px;font-weight:700}
.sinfo .sl2{font-size:13px;margin-top:2px;font-weight:500}
.sl2-ok{color:#1e7e3e}
.sl2-er{color:#c0392b}

/* ---- 比較モーダル ---- */
#modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;align-items:center;justify-content:center;padding:1rem}
#modal.open{display:flex}
#modal-inner{background:#fff;border-radius:14px;padding:1.25rem;max-width:900px;width:100%;max-height:90vh;overflow-y:auto}
#modal-title{font-size:15px;font-weight:700;margin-bottom:1rem;color:#1a1a1a}
#modal-close{float:right;font-size:20px;background:none;border:none;cursor:pointer;color:#888;line-height:1;margin-top:-2px}
#modal-close:hover{color:#1a1a1a}
#modal-body{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:540px){#modal-body{grid-template-columns:1fr}}
.modal-col p{font-size:13px;font-weight:600;color:#555;margin-bottom:.4rem}
.modal-col img{width:100%;border-radius:8px;border:1px solid #ddd;display:block}
.modal-col .modal-size{font-size:13px;margin-top:.35rem;font-weight:500}

/* ---- スライダー比較UI ---- */
#slider-wrap{margin-top:1rem;border-top:1px solid #eee;padding-top:1rem}
#slider-wrap p{font-size:13px;color:#555;margin-bottom:.5rem;font-weight:600}
#cmp-slider{width:100%;accent-color:#1a1a1a}
#cmp-canvas-wrap{position:relative;width:100%;margin-top:.75rem;border-radius:8px;overflow:hidden;border:1px solid #ddd;background:#e8e8e8;user-select:none}
#cmp-canvas-wrap canvas{display:block;width:100%;height:auto}
#cmp-label-orig{position:absolute;top:8px;left:10px;font-size:12px;background:rgba(0,0,0,.5);color:#fff;padding:2px 8px;border-radius:4px}
#cmp-label-conv{position:absolute;top:8px;right:10px;font-size:12px;background:rgba(0,0,0,.5);color:#fff;padding:2px 8px;border-radius:4px}
#cmp-divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none}

/* ---- メリット ---- */
.ml{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem}
@media(max-width:480px){.ml{grid-template-columns:1fr}}
.mi{background:#fff;border:1px solid #ddd;border-radius:10px;padding:1rem}
.mi .mt{font-size:15px;font-weight:700;margin-bottom:.3rem}
.mi .mb{font-size:14px;color:#444;line-height:1.65}

/* ---- 注意点 ---- */
.nb{background:#fffbec;border:1px solid #e8d890;border-radius:10px;padding:1.1rem 1.25rem}
.nb p{font-size:14px;color:#555;margin-bottom:.5rem;line-height:1.65}
.nb p:last-child{margin-bottom:0}
.nb strong{color:#1a1a1a}

/* ---- フッター ---- */
.ft{font-size:13px;color:#aaa;text-align:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid #e8e8e8}
.ft-nav{display:flex;justify-content:center;gap:1.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.ft-nav a{font-size:13px;color:#888;text-decoration:none}
.ft-nav a:hover{color:#1a1a1a;text-decoration:underline}
.ft-copy{font-size:13px;color:#aaa}

/* ---- リンクボタン ---- */
.related-tool-link {
margin: 20px 0;
text-align: center;
}

.related-tool-link a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
color: #555;
font-size: 14px;
text-decoration: none;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.related-tool-link a:hover {
border-color: #999;
color: #222;
background: #fafafa;
}

.related-tool-link a svg {
flex-shrink: 0;
opacity: 0.5;
}

.related-tool-link a:hover svg {
opacity: 0.8;
}