/* カエドキ デザイントークン — design/mock-approved.html（新案2 あかるいドラッグストア）から抽出。
   角丸8-16px・等幅数字はConsolas系・絵文字アイコン禁止。これが見た目の唯一の正。 */
:root{
  --bg:#ffffff; --floor:#f4f8f5; --ink:#2e3a34; --muted:#7d8a83;
  --green:#2fa36b; --green-d:#268a5a; --tag:#ffd93b; --tag-ink:#3a2f00;
  --coral:#ff6b5e; --line:#e2ebe5;
  --mono:"Consolas","Courier New",monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--ink);font-family:"Yu Gothic UI","Meiryo",sans-serif;line-height:1.7;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

header{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:5;}
.head-in{display:flex;align-items:center;gap:16px;padding:14px 0;}
.brand{font-size:24px;font-weight:900;letter-spacing:.04em;}
.brand .k{color:var(--green);}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em;}
.update{margin-left:auto;font-size:11.5px;color:var(--muted);background:var(--floor);border-radius:999px;padding:6px 14px;}
.update b{color:var(--green);font-family:var(--mono);}

/* 売り場ナビ */
.aisles{background:var(--floor);border-bottom:1px solid var(--line);}
.aisles .wrap{display:flex;gap:10px;padding:12px 24px;flex-wrap:wrap;align-items:center;}
.aisles .lbl{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.1em;margin-right:4px;}
.aisle{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;}
.aisle.on{background:var(--green);border-color:var(--green);color:#fff;}
.aisle:hover{border-color:var(--green);color:var(--green);}
.aisle.on:hover{color:#fff;}
.aisle.soon{border-style:dashed;color:var(--muted);font-weight:600;cursor:default;}

/* パンくず */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);padding:16px 0 0;}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--green);text-decoration:underline;}
.breadcrumb span:not(.sep){color:var(--ink);font-weight:700;}
.breadcrumb .sep{color:var(--line);font-weight:400;}

.hero{padding:34px 0 8px;}
.hero h1{font-size:24px;font-weight:900;line-height:1.55;}
.hero h1 .hl{color:var(--green);}
.hero p{font-size:13.5px;color:var(--muted);margin-top:4px;}
.checker{display:flex;gap:10px;margin:18px 0 30px;max-width:760px;background:var(--floor);border-radius:14px;padding:12px;}
.checker select,.checker input{border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;font-size:14px;background:#fff;outline:none;}
.checker input{flex:1;font-family:var(--mono);}
.checker input:focus,.checker select:focus{border-color:var(--green);}
.checker button{background:var(--green);color:#fff;border:none;border-radius:9px;padding:12px 30px;font-size:14.5px;font-weight:900;cursor:pointer;}
.checker button:hover{background:var(--green-d);}
.checker-msg{font-size:12px;color:var(--muted);min-height:1.4em;margin:-20px 0 20px;}

.result-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;flex-wrap:wrap;}
.result-head h2{font-size:18px;font-weight:900;}
.result-head span{font-size:11.5px;color:var(--muted);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.card{border:1.5px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;position:relative;background:#fff;}
.card:hover{border-color:#c8dcd0;box-shadow:0 4px 16px rgba(46,58,52,.07);}
.img-big{height:200px;background:var(--floor);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);overflow:hidden;}
.fitrow{position:absolute;top:24px;left:24px;display:flex;gap:6px;flex-wrap:wrap;z-index:2;}
.fitrow .fit{position:static;}
.fit{font-size:11.5px;font-weight:900;padding:4px 12px;border-radius:999px;color:#fff;background:var(--green);}
.fit.compat{background:#e0921f;}
.fitstat{font-size:11px;font-weight:800;padding:3px 10px;border-radius:999px;background:#fff;border:1.5px solid var(--green);color:var(--green);}
.fitstat.cond{border-color:#e0921f;color:#e0921f;}
.card h3{font-size:15px;font-weight:800;line-height:1.45;}
.card .sub{font-size:11.5px;color:var(--muted);margin-top:-6px;}
.strengths{display:flex;gap:6px;flex-wrap:wrap;}
/* 売り場カードの代表製品サムネ帯（観測窓＝白プレート統一・OtoGearの画像主役原則） */
.rep-strip{display:flex;gap:8px;}
.rep-plate{flex:1;min-width:0;height:96px;background:#fff;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.rep-plate img{max-width:100%;max-height:100%;object-fit:contain;}
.strength{font-size:10.5px;font-weight:700;color:var(--green);border:1px solid var(--green);border-radius:999px;padding:2px 9px;}

/* 黄色値札チップ（¥◯/日が主役） */
.tagrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pricetag{background:var(--tag);color:var(--tag-ink);border-radius:8px;padding:7px 12px;font-weight:900;display:flex;align-items:baseline;gap:5px;box-shadow:0 1.5px 0 rgba(46,58,52,.15);}
.pricetag .v{font-size:21px;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.pricetag .k{font-size:10px;}
.todays{font-size:12.5px;color:var(--ink);font-family:var(--mono);}
.todays small{display:block;font-size:10px;color:var(--muted);font-family:inherit;}
.signal{font-size:12px;font-weight:900;color:var(--coral);}
.signal.wait{color:var(--muted);font-weight:700;}
.meta{display:flex;gap:8px;align-items:center;font-size:10.5px;color:var(--muted);font-family:var(--mono);flex-wrap:wrap;}
.alive{color:var(--green);border:1px solid var(--green);border-radius:999px;padding:0 8px;font-weight:700;}
.cta{background:var(--coral);color:#fff;text-align:center;text-decoration:none;font-size:14px;font-weight:900;padding:12px;border-radius:10px;display:block;}
.cta:hover{background:#ee5749;}

section{margin:46px 0;}
section > h3{font-size:16.5px;font-weight:900;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
section > h3::before{content:"";width:6px;height:20px;border-radius:3px;background:var(--green);}
.scrollx{overflow-x:auto;}
table.matrix{border-collapse:separate;border-spacing:0;font-size:13px;width:100%;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;}
table.matrix th,table.matrix td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px 14px;text-align:center;}
table.matrix thead th{background:var(--floor);font-weight:800;}
table.matrix tbody th{text-align:left;font-weight:700;}
/* 違いくらべ: 先頭列は折り返さず内容幅、製品列は残り幅を均等割り（1列だけ肥大させない） */
table.compare{table-layout:fixed;}
table.compare thead th:first-child{width:7.5em;}
table.compare tbody th{white-space:nowrap;}
table.compare td{overflow-wrap:break-word;}
.m-ok{color:var(--green);font-weight:900;font-size:15px;}
.m-cond{color:#e0921f;font-weight:900;font-size:15px;}
.m-ng{color:#cfdad3;font-size:15px;}
.honest{background:var(--floor);border-radius:14px;padding:18px 22px;font-size:13.5px;}
.honest b{display:block;color:var(--green);margin-bottom:4px;}
footer{background:var(--floor);color:var(--muted);font-size:11.5px;padding:24px 0 46px;margin-top:52px;border-top:1px solid var(--line);}
@media(max-width:700px){.checker{flex-wrap:wrap}}