/* おもいで駄菓子 — 昭和レトロ駄菓子屋テーマ */
:root{
  --paper:#e9dcbb;        /* わら半紙 */
  --paper2:#f4ead0;
  --card:#fbf4e0;         /* 生成り */
  --ink:#43321d;          /* こげ茶インク */
  --sub:#8a7146;
  --red:#c44733;          /* 昭和レッド（やや褪色） */
  --red-dark:#8f2f22;
  --mustard:#d99a16;      /* からし */
  --teal:#2f8f86;         /* レトロ青緑 */
  --line:#cbb482;
  --f-display:"Reggae One","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --f-marker:"Yusei Magic","Hiragino Maru Gothic ProN",sans-serif;
  --f-dot:"DotGothic16",monospace;
  --f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);line-height:1.85;font-family:var(--f-body);font-weight:500;
  background-color:var(--paper);
  /* 網点（ハーフトーン）＋古紙のムラ */
  background-image:
    radial-gradient(rgba(120,90,45,.10) 1px, transparent 1.6px),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(150,110,60,.10), transparent 45%);
  background-size:9px 9px, 100% 100%, 100% 100%;
}
a{color:var(--red);text-decoration:none}

/* 看板ヘッダー（のれん風ストライプ） */
.site-head{
  padding:12px 16px;background:var(--red);
  background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.06) 0 12px, transparent 12px 24px);
  border-bottom:5px solid var(--red-dark);position:sticky;top:0;z-index:5;
  box-shadow:0 3px 0 rgba(0,0,0,.12);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--f-display);color:#fff7e6;font-size:1.5rem;letter-spacing:.04em;
  text-shadow:2px 2px 0 var(--red-dark),3px 3px 0 rgba(0,0,0,.2)}
.head-sub{font-family:var(--f-dot);color:#ffe9c4;font-size:.72rem;letter-spacing:.05em}

main{max-width:760px;margin:0 auto;padding:18px 16px 48px}
h1{font-family:var(--f-display);font-size:2rem;line-height:1.3;margin:.3em 0 .15em;color:var(--ink);
  text-shadow:2px 2px 0 #fff7e0, 3px 3px 0 rgba(196,71,51,.25)}
h2{font-family:var(--f-marker);font-size:1.35rem;margin:1.7em 0 .5em;color:var(--red-dark)}
h2::before{content:"◎ ";color:var(--mustard)}
h2{border-bottom:3px dashed var(--line);padding-bottom:.2em}
.lead{font-family:var(--f-marker);color:var(--sub);font-size:1.08rem;margin:.2em 0 1.1em}
.crumbs{font-family:var(--f-dot);font-size:.78rem;color:var(--sub);margin-bottom:.5em}
.crumbs a{color:var(--teal)}
.ad-disclosure{font-family:var(--f-dot);font-size:.72rem;color:var(--sub);margin:-.2em 0 1em}

/* 商品カード（台紙＋二重枠＋シール感） */
.hero{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;background:var(--card);
  border:2px solid var(--ink);border-radius:14px;padding:16px;
  box-shadow:6px 6px 0 rgba(67,50,29,.18);outline:3px solid var(--card);outline-offset:-8px}
.hero-img{width:300px;max-width:100%;height:300px;object-fit:contain;border-radius:10px;background:#fff;
  border:1px solid var(--line)}
.hero-img.placeholder{display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-dot);color:var(--sub);border:3px dashed var(--line);background:
   repeating-linear-gradient(45deg,#fff8e8,#fff8e8 8px,#f3e7c8 8px,#f3e7c8 16px);font-size:.92rem;line-height:1.6}
.hero-meta{flex:1;min-width:230px}

/* 押印スタンプ風バッジ */
.badge{display:inline-block;font-family:var(--f-dot);font-size:.82rem;padding:4px 12px;margin-bottom:10px;
  border:2.5px solid var(--red);color:var(--red);border-radius:8px;transform:rotate(-4deg);
  box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.04);letter-spacing:.04em;background:#fff8ee}
.badge.live{border-color:var(--teal);color:var(--teal)}
.badge.ended{border-color:#9aa0a6;color:#7c8186;transform:rotate(3deg)}

.spec{width:100%;border-collapse:collapse;margin:.2em 0 .9em}
.spec th,.spec td{text-align:left;padding:7px 8px;border-bottom:1px dashed var(--line);font-size:.96rem;vertical-align:top}
.spec th{width:5.5em;color:var(--sub);font-family:var(--f-dot);font-size:.82rem;white-space:nowrap}

/* レトロな分厚い購入ボタン */
.buybox{margin-top:10px}
.buy{display:inline-block;font-family:var(--f-display);font-size:1.05rem;background:var(--red);color:#fff7e6;
  padding:13px 24px;border-radius:12px;border:2px solid var(--red-dark);
  box-shadow:0 5px 0 var(--red-dark), 0 7px 10px rgba(0,0,0,.2);letter-spacing:.03em}
.buy:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-dark)}
.price{display:inline-block;font-family:var(--f-dot);color:var(--ink);font-size:.82rem;margin-top:8px;
  background:var(--mustard);color:#3a2a12;padding:2px 10px;border-radius:4px;
  box-shadow:2px 2px 0 rgba(0,0,0,.15)}
.ph{display:inline-block;font-family:var(--f-dot);color:#8a6a2a;background:#fbefcf;border:2px dashed var(--mustard);
  font-size:.7rem;padding:3px 9px;border-radius:6px;margin-top:8px;letter-spacing:.03em}

/* 広告枠（チケット風の点線帯） */
.ad-slot{margin:20px 0;padding:20px;text-align:center;font-family:var(--f-dot);color:var(--sub);
  background:repeating-linear-gradient(45deg,#f1e6c7,#f1e6c7 11px,#e9dbb6 11px,#e9dbb6 22px);
  border:2px dashed var(--line);border-radius:10px;font-size:.82rem}

.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.chips li{font-family:var(--f-dot);font-size:.88rem;background:#fff8ec;border:2px solid var(--line);
  border-radius:999px;padding:5px 13px;box-shadow:2px 2px 0 rgba(67,50,29,.1)}
.tips{padding-left:0;list-style:none}
.tips li{margin:.4em 0;padding-left:1.5em;position:relative}
.tips li::before{content:"★";position:absolute;left:0;color:var(--mustard)}
.buyhint{background:#fff8ec;border:2px solid var(--line);border-left:8px solid var(--mustard);
  border-radius:10px;padding:12px 14px;color:#5a4322}

.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.cards li a{display:block;background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:12px;
  box-shadow:4px 4px 0 rgba(67,50,29,.15);transition:transform .08s;height:100%}
.cards li a:active{transform:translate(2px,2px)}
.card-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:8px;margin-bottom:8px;padding:6px}
.card-img.placeholder,.hero-img.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--f-dot);color:var(--sub);border:2px dashed var(--line);background:
   repeating-linear-gradient(45deg,#fff8e8,#fff8e8 8px,#f3e7c8 8px,#f3e7c8 16px)}
.ph-ico{font-size:2rem;line-height:1;filter:saturate(.85)}
.ph-cat{font-size:.74rem}
.soldout-note{font-family:var(--f-dot);font-size:.82rem;color:#7c8186;background:#f1f1ee;border:2px dashed #c7c7c2;
  border-radius:10px;padding:11px 13px}
.buy-search{background:var(--teal);border-color:#246b63;box-shadow:0 5px 0 #246b63,0 7px 10px rgba(0,0,0,.2)}
.card-name{display:block;font-family:var(--f-display);font-size:.98rem;line-height:1.35;color:var(--ink)}
.card-sub{display:block;font-family:var(--f-dot);color:var(--sub);font-size:.72rem;margin:.2em 0 .5em}
.count{font-family:var(--f-dot);color:var(--sub);font-size:.82rem;margin-top:1.2em}

/* ===== トップページ（ワイド・図鑑レイアウト） ===== */
main.home{max-width:1400px}
.home section{margin:26px 0}
.home-hero{text-align:center;margin:10px 0 8px}
.home-hero h1{margin:.1em 0}
.home-hero .lead{margin:.1em 0 .6em}
.searchbar{position:relative;max-width:620px;margin:16px auto 0}
.searchbar input{width:100%;box-sizing:border-box;font-family:var(--f-body);font-weight:500;font-size:1rem;
  padding:13px 20px 13px 48px;color:var(--ink);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7146' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 16px center;
  background-size:20px 20px;border:2px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 rgba(67,50,29,.16)}
.searchbar input::placeholder{color:#a9925f}
.searchbar input:focus{outline:none;border-color:var(--red);box-shadow:4px 4px 0 rgba(196,71,51,.25)}
.sec-note{font-family:var(--f-dot);color:var(--sub);font-size:.74rem;margin:-.4em 0 .7em}

/* 今日の駄菓子 */
.today-link{display:flex;gap:16px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:14px;
  padding:14px;box-shadow:6px 6px 0 rgba(67,50,29,.18);outline:3px solid var(--mustard);outline-offset:-9px}
.today-link img{width:120px;height:120px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;flex:none;padding:4px}
.today-body{display:flex;flex-direction:column;gap:2px}
.today-tag{display:inline-block;align-self:flex-start;font-family:var(--f-dot);font-size:.72rem;color:#3a2a12;
  background:var(--mustard);padding:2px 10px;border-radius:6px;box-shadow:2px 2px 0 rgba(0,0,0,.15);margin-bottom:4px}
.today-name{font-family:var(--f-display);font-size:1.4rem;color:var(--ink);line-height:1.3}
.today-sub{font-family:var(--f-dot);font-size:.78rem;color:var(--sub)}
.today-cta{font-family:var(--f-marker);color:var(--red);margin-top:4px}

/* 人気ランキング */
.rank-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rank-list li a{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--ink);border-radius:10px;
  padding:8px 10px;box-shadow:3px 3px 0 rgba(67,50,29,.12)}
.rank-no{font-family:var(--f-display);font-size:1.25rem;color:var(--sub);min-width:1.5em;text-align:center;flex:none}
.rank-list li:nth-child(1) .rank-no{color:#c79a13}
.rank-list li:nth-child(2) .rank-no{color:#8f8f8f}
.rank-list li:nth-child(3) .rank-no{color:#b5712f}
.rank-list img{width:54px;height:54px;object-fit:cover;background:#fff;border:1px solid var(--line);border-radius:6px;flex:none}
.rank-info{display:flex;flex-direction:column;min-width:0}
.rank-name{font-family:var(--f-body);font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-meta{font-family:var(--f-dot);font-size:.72rem;color:var(--mustard)}
.rank-cnt{color:var(--sub)}

/* カテゴリ絞り込み */
.cat-filters{display:flex;flex-wrap:wrap;gap:8px}
.cat-filters button{font-family:var(--f-dot);font-size:.82rem;padding:7px 14px;color:var(--ink);background:#fff8ec;
  border:2px solid var(--line);border-radius:999px;cursor:pointer;box-shadow:2px 2px 0 rgba(67,50,29,.1)}
.cat-filters button:hover{background:#fff}
.cat-filters button.active{background:var(--red);color:#fff7e6;border-color:var(--red-dark)}
.noresult{font-family:var(--f-dot);color:var(--sub);text-align:center;padding:24px}

/* タブ（年代・カテゴリの入口リンク） */
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{display:inline-block;font-family:var(--f-dot);font-size:.82rem;padding:7px 14px;color:var(--ink);
  background:#fff8ec;border:2px solid var(--line);border-radius:999px;box-shadow:2px 2px 0 rgba(67,50,29,.1)}
.tab:hover{background:#fff;color:var(--red)}

/* 懐かし診断 */
.age-finder{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:16px;
  box-shadow:6px 6px 0 rgba(67,50,29,.16);outline:3px solid var(--mustard);outline-offset:-9px}
.age-finder h2{margin-top:.2em}
.age-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--f-dot);font-size:.9rem}
.age-form input{width:96px;font-family:var(--f-body);font-size:1rem;padding:10px 12px;border:2px solid var(--ink);border-radius:10px;background:#fff}
#age-go{font-family:var(--f-display);font-size:1rem;background:var(--red);color:#fff7e6;padding:10px 20px;border:2px solid var(--red-dark);border-radius:10px;box-shadow:0 4px 0 var(--red-dark);cursor:pointer}
#age-go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-dark)}
.age-result{margin-top:14px}
.age-msg{font-family:var(--f-marker);color:var(--red-dark);font-size:1.05rem}
.age-msg b{color:var(--red);font-size:1.2em}
.age-cards{margin-top:10px}

/* ページ送り */
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0}
.pager button{font-family:var(--f-dot);font-size:.86rem;padding:9px 16px;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 rgba(67,50,29,.15);cursor:pointer}
.pager button[disabled]{opacity:.4;cursor:default;box-shadow:none}
.pg-info{font-family:var(--f-dot);font-size:.82rem;color:var(--sub)}

/* もっと見る */
.more{margin:16px 0;text-align:center}
.more-link{display:inline-block;font-family:var(--f-display);font-size:1.05rem;color:#fff7e6;background:var(--teal);padding:12px 22px;border:2px solid #246b63;border-radius:12px;box-shadow:0 4px 0 #246b63}

/* 今日の駄菓子・画像なし時の絵文字枠 */
.today-ph{width:120px;height:120px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:#fff;border:1px solid var(--line);border-radius:10px;flex:none}

/* スマホは2カラム（縦長を短く） */
@media (max-width:560px){
  main.home,main.product,main.page{padding:14px 12px 40px}
  .cards{grid-template-columns:repeat(2,1fr);gap:10px}
  .cards li a{padding:9px}
  .card-name{font-size:.9rem}
  .rank-list{grid-template-columns:1fr}
  .today-link img,.today-ph{width:92px;height:92px}
  /* ヘッダーは追随させない＋タグライン非表示でコンパクトに */
  .site-head{position:static;padding:10px 14px}
  .head-sub{display:none}
  .logo{font-size:1.3rem}
  /* 年代・カテゴリのタグは縦に広げず、横1行スワイプに */
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;
    scroll-snap-type:x proximity;-ms-overflow-style:none;scrollbar-width:thin}
  .tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
  .home section{margin:18px 0}
}

.site-foot{max-width:760px;margin:0 auto;padding:24px 16px;border-top:4px double var(--line);
  color:var(--sub);font-family:var(--f-dot);font-size:.78rem;line-height:1.9}
.disclosure{background:#fff8ec;border:2px dashed var(--line);border-radius:8px;padding:11px}
.site-foot a{color:var(--teal)}
.attribution{margin-top:.8em;font-size:.72rem;opacity:.85}
.copy{margin-top:.6em}