/* 八番通り商店街 - 共通スタイル（プレオープン構築中） */
:root{
  --paper:#f4ead8; --paper2:#efe3cd; --ink:#2e2a26; --brown:#5a4632;
  --amber:#a4713a; --aka:#9e2b25; --line:#c9b892;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif;
  line-height:1.9;font-size:16px}
a{color:var(--aka)}
header.site{background:var(--paper2);border-bottom:3px double var(--brown);padding:20px 16px 12px}
header.site .brand{font-size:28px;letter-spacing:.12em;color:var(--brown);margin:0}
header.site .sub{font-size:13px;color:var(--brown);margin:2px 0 10px}
nav.main a{margin-right:18px;font-size:14px;text-decoration:none;color:var(--ink)}
nav.main a:hover{color:var(--aka)}
main{max-width:880px;margin:0 auto;padding:24px 16px 48px}
h1{font-size:24px;border-left:6px solid var(--aka);padding-left:10px;letter-spacing:.06em}
h2{font-size:19px;border-bottom:1px solid var(--brown);padding-bottom:4px;margin-top:36px}
.pr{font-size:12px;color:var(--brown)}
h2.quiet{font-size:15px;border-bottom:none;color:var(--brown)}
.note{font-size:13px;color:var(--brown)}
.criteria{font-size:14px;line-height:1.9;border:1px solid #d8c9a3;background:#fffdf7;padding:10px 14px;margin:10px 0}
.store-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:640px){.store-grid{grid-template-columns:1fr}}
.store-card{background:#fbf5e9;border:1px solid var(--brown);padding:14px}
.store-card img{width:100%;height:auto;display:block;background:var(--paper2)}
.store-card h3{margin:10px 0 4px;font-size:18px}
.product{border-top:1px dotted var(--brown);padding:14px 0}
.product h3{margin:0 0 4px;font-size:17px}
.shelf{font-size:12px;color:var(--aka);letter-spacing:.08em}
.btns a{display:inline-block;margin:6px 10px 0 0;padding:4px 14px;border:1px solid var(--brown);
  text-decoration:none;font-size:14px;color:var(--ink);background:#fff8ec}
.btns a.disabled{opacity:.45;pointer-events:none}
footer.site{border-top:3px double var(--brown);background:var(--paper2);
  padding:16px;font-size:12px;color:var(--brown)}
.imgph{background:var(--paper2);border:1px dashed var(--brown);color:var(--brown);
  text-align:left;padding:28px 14px;font-size:13px}

img.storefront, img.hero, img.map { width: 100%; height: auto; display: block; margin: 0.6em 0; }
img.owner { width: min(520px, 100%); height: auto; display: block; margin: 0.4em 0 1em; }
.owner-corner { display: flex; gap: 14px; align-items: flex-start; border-top: 1px dotted var(--brown); margin-top: 2em; padding-top: 1em; }
.owner-corner img { width: 240px; max-width: 42%; height: auto; flex: none; }
.owner-corner p { margin: 0; font-size: 13px; }
.pick { display: inline-block; background: var(--aka); color: #fff; font-size: 12px; letter-spacing: .08em; padding: 2px 8px; margin-left: 8px; vertical-align: middle; }
.pick.used { background: var(--brown); }
.rbox { margin: 10px 0; overflow-x: auto; }
.pickline { display: flex; gap: 12px; align-items: flex-start; }
.pickline img.face { width: 84px; height: auto; flex: none; }
.pickline p { margin: 0; }
.card img.thumb { width: 100%; height: auto; display: block; margin-bottom: 0.5em; }

/* --- 拡張レイアウト（おすすめ棚・グリッド・検索）2026-10-31 --- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
@media(max-width:640px){.pgrid{grid-template-columns:1fr 1fr}}
.pcard{background:#fbf5e9;border:1px solid var(--line);display:flex;flex-direction:column}
.pcard>img,.pcard>a>img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#fff}
.pcard>a>img.timg{aspect-ratio:16/9}
.pcard .noimg{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--paper2);color:var(--brown);font-size:13px;border-bottom:1px dashed var(--line);text-align:center;padding:8px}
.pcard .cbody{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard h3{margin:0;font-size:14.5px;line-height:1.6}
.pcard .price{margin:0;color:var(--aka);font-size:14.5px}
.pcard .cmt{margin:0;font-size:12.5px;color:#4a4038;line-height:1.7}
.pcard .cmt p{margin:0}
.pcard .meta{margin:0;font-size:11.5px;color:var(--brown)}
.btnrow{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px;padding-top:6px}
a.buy{display:inline-block;text-align:center;padding:5px 12px;border:1px solid var(--brown);background:#fff8ec;color:var(--ink);text-decoration:none;font-size:13.5px}
a.buy.alt{background:transparent}
a.buy.disabled{opacity:.45;pointer-events:none}
.pcard.big .cmt{font-size:13.5px}
.pcard img.face{width:64px;height:64px;object-fit:cover;float:left;margin:2px 10px 4px 0;border:1px solid var(--line)}
input[type="search"]{width:100%;padding:10px 12px;font:inherit;font-size:16px;border:1px solid var(--brown);background:#fffdf6;margin-top:8px}
.chlabel{margin:14px 0 4px;font-size:13px;color:var(--brown)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:5px 13px;font:inherit;font-size:13.5px;border:1px solid var(--brown);background:#fff8ec;color:var(--ink);border-radius:999px;cursor:pointer}
.chip.on{background:var(--aka);border-color:var(--aka);color:#fff}
.hide{display:none}

/* --- 季節の特集バナー／ヒーロー（2026-10-31） --- */
.feature-banner{display:block;margin:34px 0 10px;padding:30px 28px;min-height:190px;
  color:#fff8ec;text-decoration:none;border:1px solid var(--brown);
  background:linear-gradient(90deg,rgba(43,31,20,.82) 0%,rgba(43,31,20,.58) 52%,rgba(43,31,20,.12) 100%),url('images/street-a.jpg') center 58%/cover;
  box-shadow:0 8px 22px rgba(62,43,25,.16)}
.feature-banner span{display:block}
.feature-banner .fb-kicker{font-size:11.5px;letter-spacing:.18em;color:#ead9b8}
.feature-banner .fb-title{font-size:29px;line-height:1.45;letter-spacing:.07em;margin-top:8px}
.feature-banner .fb-copy{font-size:14px;margin-top:4px;color:#fff8ec}
.feature-banner .fb-link{display:inline-block;margin-top:16px;padding:3px 13px;
  border:1px solid #fff8ec;color:#fff8ec;font-size:13.5px;background:rgba(46,38,30,.28)}
.feature-banner:hover .fb-link{background:var(--aka);border-color:var(--aka)}
.notice-board{margin:22px 0 6px;padding:14px 18px 12px;background:var(--paper2);
  border:3px double var(--brown)}
.notice-board p{margin:0}
.notice-board .nb-title{font-size:13px;letter-spacing:.16em;color:var(--aka);margin-bottom:4px}
.notice-board .nb-body{font-size:14.5px}
.feature-hero{margin-top:14px;padding:42px 30px 34px;min-height:320px;color:#fff8ec;
  display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--brown);
  background:linear-gradient(90deg,rgba(43,31,20,.84) 0%,rgba(43,31,20,.60) 54%,rgba(43,31,20,.14) 100%),url('images/street-b.jpg') center 55%/cover;
  box-shadow:0 8px 22px rgba(62,43,25,.16)}
.feature-hero p{margin:0}
.feature-hero .feature-kicker{font-size:11.5px;letter-spacing:.18em;color:#ead9b8}
.feature-hero .feature-title{font-size:38px;line-height:1.35;letter-spacing:.07em;margin-top:10px}
.feature-hero .feature-lead{font-size:15px;margin-top:10px}
.feature-intro{max-width:680px;margin-top:26px}
@media(max-width:640px){
  .feature-banner{padding:24px 20px;min-height:170px}
  .feature-banner .fb-title{font-size:24px}
  .feature-hero{padding:30px 20px 26px;min-height:270px}
  .feature-hero .feature-title{font-size:31px}
}

/* 店主の一言（名前付き）と、トップの推しコーナー */
.pcard .oline { margin: 0; font-size: 12.5px; color: #4a4038; line-height: 1.7; }
.ol-name { color: var(--aka); font-size: 11.5px; letter-spacing: .08em; margin-right: 6px; }
.pgrid.four { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .pgrid.four { grid-template-columns: 1fr; } }

/* ============================================================
   プロデザイン改修（2026-11-01）
   今どきの通販サイトの読みやすさ・使いやすさを、紙と墨の世界観のまま取り入れる。
   見出しと看板は明朝（通りの顔）、本文とUIはゴシック（読み物としての実用）。
   ============================================================ */
:root{
  --card:#fffdf6;
  --shadow-s:0 1px 3px rgba(62,43,25,.08),0 4px 14px rgba(62,43,25,.05);
  --shadow-m:0 3px 8px rgba(62,43,25,.10),0 14px 30px rgba(62,43,25,.10);
  --radius:12px;
}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
h1,h2,header.site .brand,.store-card h3,
.feature-banner .fb-title,.feature-hero .feature-title,
.owner-corner,.feature-intro{font-family:"Hiragino Mincho ProN","Yu Mincho","MS Mincho",serif}
::selection{background:#e8d9b8}
:focus-visible{outline:2px solid var(--aka);outline-offset:2px}

/* 追従ヘッダー：どのページでも店並びへ戻れる */
header.site{position:sticky;top:0;z-index:60;padding:10px 16px 9px;
  box-shadow:0 1px 0 rgba(90,70,50,.12),0 8px 20px rgba(62,43,25,.07)}
header.site .brand{font-size:24px}
header.site .sub{font-size:12px;margin:0 0 6px}
nav.main{display:flex;flex-wrap:wrap;gap:2px 4px}
nav.main a{margin-right:0;padding:4px 9px;border-radius:999px;font-size:13.5px}
nav.main a:hover{background:#fff8ec;color:var(--aka)}
@media(max-width:640px){
  header.site .sub{display:none}
  header.site .brand{font-size:21px}
  nav.main{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  nav.main::-webkit-scrollbar{display:none}
}

main{max-width:1060px;padding:28px 18px 56px}
h1{font-size:27px;margin-top:6px}
h2{font-size:20px;padding-bottom:6px;margin-top:44px}
.pr{margin-top:2px}

/* 画像は柔らかく額装する */
img.storefront,img.hero,img.map{border-radius:var(--radius);box-shadow:var(--shadow-s)}
.store-card{border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s);transition:transform .25s ease,box-shadow .25s ease}
.store-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.store-card img{border-radius:8px}
.owner-corner img{border-radius:10px}

/* 商品カード：白い棚に、そっと浮かせる */
.pgrid{gap:18px;margin-top:14px}
.pcard{background:var(--card);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-s);
  transition:transform .25s ease,box-shadow .25s ease;scroll-margin-top:110px}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.pcard>img,.pcard>a>img{transition:transform .45s ease}
.pcard:hover>img,.pcard:hover>a>img{transform:scale(1.04)}
.pcard .cbody{padding:12px 14px 14px;gap:5px}
.pcard h3{font-size:15px;font-weight:600;line-height:1.55}
.pcard .price{font-size:15.5px;font-weight:700}
.pcard .cmt{font-size:12.8px}
.pcard img.face{border-radius:8px}
.pick{border-radius:999px;padding:2px 9px}

/* 購入ボタン：楽天＝主ボタン（朱）、Amazon＝副ボタン（紙に茶枠） */
.btnrow{gap:8px;padding-top:8px}
a.buy{display:flex;align-items:center;justify-content:center;flex:1 1 0;
  min-height:42px;padding:6px 10px;border-radius:8px;font-size:14px;font-weight:600;
  transition:background .2s ease,transform .15s ease}
a.buy:active{transform:scale(.98)}
a.buy.primary{background:var(--aka);border-color:var(--aka);color:#fff}
a.buy.primary:hover{background:#87231f;border-color:#87231f}
a.buy.amz{background:var(--card);border-color:var(--brown);color:var(--ink)}
a.buy.amz:hover{background:var(--paper2)}
a.buy.alt{flex:0 1 auto;background:transparent;border-color:var(--line);color:var(--brown);font-weight:500}
a.buy.set{background:#fff8ec;border-color:var(--amber);color:var(--brown);font-size:12.5px;font-weight:500}
a.buy.set:hover{background:var(--paper2)}
.btns a{border-radius:8px;padding:6px 16px}

/* 検索と絞り込み：触れる大きさに */
input[type="search"]{border-radius:10px;padding:12px 14px;border-color:var(--line);background:var(--card)}
input[type="search"]:focus{outline:none;border-color:var(--aka);box-shadow:0 0 0 3px rgba(158,43,37,.18)}
.chip{padding:8px 16px;min-height:40px;font-size:14px;background:var(--card)}
.chip:hover{border-color:var(--aka);color:var(--aka)}
.chip.on:hover{color:#fff}

/* 特集とお知らせの角を丸く、今の紙面に馴染ませる */
.feature-banner,.feature-hero{border-radius:14px}
.notice-board{border-radius:10px}
footer.site{padding:26px 16px 30px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* 棚セクション（2026-11-01：季節物を先に、棚見出しで魅せる並びへ） */
.shelf-sec{margin-top:38px}
.shelf-name{font-family:"Hiragino Mincho ProN","Yu Mincho","IPA Mincho",serif;font-size:17px;font-weight:600;color:var(--ink);border-left:4px solid var(--aka);padding:2px 0 2px 10px;margin:0 0 4px;display:flex;align-items:center;gap:10px}
.season-tag{font-family:sans-serif;font-size:11px;font-weight:700;color:#fff;background:var(--aka);border-radius:999px;padding:2px 9px;letter-spacing:.05em}
.shelf-count{font-family:sans-serif;font-size:12px;font-weight:400;color:#8a7a68;letter-spacing:.03em}
.pick.hot{background:#c9920e;color:#fff}
/* 棚ジャンプナビ（2026-11-08：スクロール中も棚を移動できるよう上部に固定） */
.shelfnav{position:sticky;top:0;z-index:20;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding:8px 2px;background:rgba(250,246,238,.94);scrollbar-width:none}
.shelfnav::-webkit-scrollbar{display:none}
.shelfnav a{flex:none;font-size:13px;text-decoration:none;color:var(--ink);border:1px solid #d8cbb6;border-radius:999px;padding:4px 12px;background:#fffdf8}
.shelfnav a:hover{color:var(--aka);border-color:var(--aka)}
.shelf-sec{scroll-margin-top:52px}

/* 久世書店 作者カード（2026-11-13：C案・ページ内作者カード化） */
.author-picks{list-style:none;margin:8px 0 0;padding:0}
.author-picks li{padding:6px 2px;border-bottom:1px dotted var(--line)}
.author-picks a{text-decoration:none}
.author-picks a:hover{text-decoration:underline}
.author-pick-author{font-size:13px;color:var(--brown);margin-left:8px}
.author-reading{font-family:sans-serif;font-size:12.5px;font-weight:400;color:#8a7a68;letter-spacing:.04em}
.author-intro{max-width:720px;margin:6px 0 2px;font-size:14.5px;line-height:1.9}
.author-line{max-width:720px;margin:2px 0;font-size:14px;line-height:1.9;color:#4a4038}
.author-order{margin:2px 0;font-size:13px;color:var(--aka)}
.pick.entry{background:var(--brown)}

/* 尾道界隈の写真（チラ見せ） */
.spot-photo{margin:10px 0 16px}
.spot-photo img{width:100%;max-width:520px;height:auto;border-radius:10px;display:block;box-shadow:0 2px 10px rgba(90,70,50,.18)}
.spot-photo figcaption{font-size:12px;color:#6b5d4f;margin-top:5px}
.spot-photo.hero img{max-width:100%}

/* 通りの外れに 入口カード（2026-11-01） */
.gate-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:720px;margin:14px 0}
.gate-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);padding:0 0 14px;text-decoration:none;color:inherit;text-align:center;transition:transform .25s ease,box-shadow .25s ease}
.gate-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-m)}
.gate-card img{width:100%;height:170px;object-fit:cover;display:block}
.gate-name{display:block;font-family:serif;font-size:19px;font-weight:bold;margin:12px 0 4px}
.gate-desc{display:block;font-size:13px;color:#555;line-height:1.7;padding:0 12px}
.gate-go{display:inline-block;margin-top:10px;border:1px solid var(--aka);color:var(--aka);padding:6px 18px;border-radius:999px;font-size:13px}
.pcard .img-credit{margin:0;padding:5px 12px 0;font-size:11px}

/* トップ「商店街のお話」（noteマガジン案内・2026-11-14準備、公開は11/15の公開ジョブで） */
.stories{margin:26px 0 6px;padding:22px 24px 18px;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--aka);border-radius:10px;box-shadow:var(--shadow-s);text-align:left}
.stories .s-kicker{margin:0;font-size:11.5px;letter-spacing:.18em;color:var(--aka)}
.stories h2{margin:4px 0 8px}
.stories p{margin:0 0 10px}
.stories .s-actions{margin:14px 0 8px}
.stories .s-btn{display:inline-block;background:var(--aka);color:#fff;text-decoration:none;padding:8px 22px;border-radius:999px;font-size:15px}
.stories .s-btn:hover{background:#87231f}
.stories .note{margin:0}

/* トップ入口の店名ピルリンク行（2026-11-14・受け口改善） */
.store-pills{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 6px}
.store-pills a{padding:7px 16px;font-size:14px;border:1px solid var(--brown);background:#fff8ec;color:var(--ink);border-radius:999px;text-decoration:none}
.store-pills a:hover{border-color:var(--aka);color:var(--aka)}