/* Tokyo Wine Shop Navi — お役立ちコンテンツ記事（エディトリアル基調） */
:root{--cream:#FBFAF7;--ink:#211E1A;--orange:#7B1E3B;--sky:#3FA9D6;--line:#E6E1D7;--muted:#847E73;--shadow:none;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
*{box-sizing:border-box}
body.tpn-article-body{margin:0;background:var(--cream);color:var(--ink);
  font-family:-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;line-height:1.85;-webkit-font-smoothing:antialiased}
.tpn-wrap{max-width:680px;margin:0 auto;background:var(--cream);min-height:100dvh;padding-bottom:78px}
/* 下部固定ナビ（/column/配下のみ） */
.tpn-nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;max-width:680px;margin:0 auto;
  background:#fff;border-top:1px solid var(--line)}
.tpn-nav a,.tpn-nav button{flex:1;border:none;background:none;text-decoration:none;text-align:center;cursor:pointer;
  padding:15px 0 calc(15px + env(safe-area-inset-bottom));font-size:.8rem;font-weight:600;letter-spacing:.12em;color:var(--muted);
  font-family:inherit}
.tpn-nav .on{color:var(--orange)}
.tpn-nav a+a,.tpn-nav button{border-left:1px solid var(--line)}
.tpn-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(250,246,239,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.tpn-top .back{width:38px;height:38px;border:none;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:1.1rem;cursor:pointer;flex:none}
.tpn-top .brand{font-weight:800;font-size:.95rem;color:var(--orange);text-decoration:none}
.art{padding:18px 18px 40px}
.art .crumb{font-size:.78rem;color:var(--muted);font-weight:500;letter-spacing:.06em;margin-bottom:10px}
.art h1{font-family:var(--serif);font-size:1.45rem;font-weight:600;line-height:1.55;letter-spacing:.06em;margin:.1em 0 .3em}
.art .meta{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.art .hero{width:100%;margin:6px 0 18px}
.art .body{font-size:1rem}
.art .body h2{font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:.1em;margin:36px 0 14px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.art .body h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:.08em;margin:26px 0 8px;color:var(--orange)}
.art .body p{margin:0 0 16px}
.art .body ul,.art .body ol{margin:0 0 16px;padding-left:1.4em}
.art .body li{margin:6px 0}
.art .body a{color:var(--orange);font-weight:600}
.art .body img{max-width:100%;height:auto}
.art .body blockquote{margin:16px 0;padding:12px 16px;background:#fff;border-left:2px solid var(--orange);color:#4A463F}
.art .cta-back{display:block;text-align:center;margin-top:28px;background:var(--orange);color:#fff;text-decoration:none;
  font-weight:600;letter-spacing:.16em;border-radius:2px;padding:14px 22px}
.art .lead-sub{color:var(--muted);font-weight:400;letter-spacing:.02em;margin:-2px 0 20px}
.art .note{color:var(--muted)}
/* コラム本文の表：モバイルは横スクロール可・セル最小幅で潰れ防止 */
.art .body table{display:block;width:max-content;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-collapse:collapse;margin:10px 0 20px;font-size:.9rem;line-height:1.6;background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.art .body table th,.art .body table td{border:1px solid var(--line);padding:.55em .75em;vertical-align:top;
  min-width:7.5em;text-align:left}
.art .body table th{background:var(--cream);font-weight:800;white-space:nowrap}
.art .body table td{white-space:normal}
.art .body table a{color:var(--sky);font-weight:700}
/* 一覧カード */
.tpn-arc-list{display:flex;flex-direction:column;gap:12px}
.tpn-summer{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);grid-auto-columns:minmax(240px,280px);gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:2px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tpn-summer::-webkit-scrollbar{display:none}
.tpn-summer.tpn-summer--single{grid-template-rows:1fr}
.tpn-scard{scroll-snap-align:start;display:flex;align-items:center;gap:10px;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line);border-radius:14px;padding:9px 11px;text-decoration:none;color:var(--ink);min-width:0}
.tpn-scard .ph{flex:none;width:46px;height:46px;border-radius:11px;background:#EFE7D8 center/cover no-repeat}
.tpn-scard .ic{flex:none;width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:linear-gradient(135deg,#FFE7C2,#FFD59E)}
.tpn-scard .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tpn-scard .tag{align-self:flex-start;font-size:.66rem;font-weight:800;color:#fff;background:var(--orange);border-radius:999px;padding:1px 8px;line-height:1.5}
.tpn-scard .nm{font-size:.9rem;font-weight:800;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpn-scard .meta{font-size:.74rem;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpn-scard .arw{flex:none;color:var(--orange);font-size:1.2rem;font-weight:800}
.art .ev-summary-head{font-size:1.12rem;font-weight:800;margin:26px 0 10px;color:var(--ink)}
.art .ev-table{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:.92rem;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.art .ev-table th,.art .ev-table td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.art .ev-table tr:last-child th,.art .ev-table tr:last-child td{border-bottom:none}
.art .ev-table th{width:34%;color:var(--muted);font-weight:800;background:#FCF8F1}
.art .ev-table td{color:var(--ink);font-weight:600}
.art .ev-table td a{color:var(--sky);text-decoration:none;font-weight:700}
.art .ev-table .muted{color:var(--muted);font-weight:600}
.art .ev-table-note{font-size:.78rem;color:var(--muted);margin:6px 2px 0;line-height:1.6}
.art .arc-group{font-size:1.08rem;font-weight:800;color:var(--ink);margin:28px 0 12px;padding-left:12px;position:relative;scroll-margin-top:64px}
.art .arc-group::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:5px;height:1.1em;border-radius:3px;background:var(--orange)}
.art .arc-group:first-of-type{margin-top:8px}
.art .arc-anchors{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 6px}
.art .arc-anchors a{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:7px 13px;font-size:.85rem;font-weight:800;color:var(--ink);text-decoration:none}
.art .area-count{display:inline-block;background:#FFF3E8;color:var(--orange);font-weight:800;font-size:.9rem;border-radius:999px;padding:6px 14px;margin:0 0 16px}
.art .area-count b{font-size:1.08rem;margin:0 1px}
.tpn-arc-card{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:13px 14px;text-decoration:none;color:var(--ink)}
.tpn-arc-card .ph{flex:none;width:64px;height:64px;background:#EFEBE2 center/cover no-repeat}
.tpn-arc-card .ic{flex:none;width:64px;height:64px;border:1px solid var(--line);background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.tpn-arc-card .t{display:flex;flex-direction:column;min-width:0}
.tpn-arc-card .t b{font-size:.98rem;font-weight:600;line-height:1.4}
.tpn-arc-card .t small{font-size:.82rem;color:var(--muted);margin-top:3px}
.crumb a{color:var(--muted);text-decoration:none}
/* イベントページ */
.art .ev-meta{display:flex;gap:10px;align-items:center;margin:-2px 0 14px;flex-wrap:wrap}
.art .ev-badge{font-size:.78rem;font-weight:800;background:var(--orange);color:#fff;border-radius:8px;padding:3px 10px}
.art .ev-period{font-size:.85rem;color:var(--muted);font-weight:700}
/* 店舗カード（エリアページ） */
.tpn-fac-list{display:flex;flex-direction:column;gap:12px}
.tpn-fac-card{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:3px;padding:12px;text-decoration:none;color:var(--ink)}
.tpn-fac-card .ph{flex:none;width:72px;height:72px;background:#EFEBE2 center/cover no-repeat}
.tpn-fac-card .ph.is-logo{background-size:contain;background-color:#fff;background-origin:content-box;padding:6px;border:1px solid var(--line);box-sizing:border-box}
.tpn-fac-card .ph.noimg{display:flex;align-items:center;justify-content:center;font-size:1.9rem}
.tpn-fac-card .t{display:flex;flex-direction:column;min-width:0;gap:3px}
.tpn-fac-card .t b{font-size:.98rem;font-weight:600;line-height:1.4}
.tpn-fac-card .t small{font-size:.82rem;color:var(--muted)}
.tpn-fac-card .badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.tpn-fac-card .badges i{font-style:normal;font-size:.68rem;font-weight:500;letter-spacing:.04em;border:1px solid var(--line);background:#FAF8F3;color:#6F6A60;border-radius:2px;padding:2px 7px}
.tpn-fac-card .b-en,.tpn-fac-card .b-na,.tpn-fac-card .b-bus,.tpn-fac-card .b-pol{background:#FAF8F3;color:#6F6A60}

/* === お問い合わせフォーム(2026-06-28) === */
.tpn-form{display:flex;flex-direction:column;gap:14px;margin:8px 0 4px}
.tpn-form .tpn-fl{display:flex;flex-direction:column;gap:5px;margin:0}
.tpn-form label{font-weight:700;font-size:.9rem}
.tpn-form .req{margin-left:6px;font-size:.68rem;color:#fff;background:#E8543E;border-radius:5px;padding:1px 6px;font-weight:700}
.tpn-form .opt{margin-left:6px;font-size:.68rem;color:#8a8478;background:#EDEAE3;border-radius:5px;padding:1px 6px;font-weight:700}
.tpn-form input,.tpn-form textarea{width:100%;box-sizing:border-box;border:1px solid #D8D2C6;border-radius:2px;padding:11px 12px;font-size:1rem;background:#fff}
.tpn-form input:focus,.tpn-form textarea:focus{outline:none;border-color:var(--orange)}
.tpn-privacy-box{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:12px 14px;font-size:.85rem;line-height:1.6}
.tpn-privacy-box b{display:block;margin-bottom:4px}
.tpn-privacy-box p{margin:0}
.tpn-agree{font-size:.92rem}
.tpn-agree label{display:flex;align-items:center;gap:8px;font-weight:600}
.tpn-agree input{width:20px;height:20px}
.tpn-hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}
.tpn-submit{margin:4px 0 0}
.tpn-submit button{width:100%;border:none;cursor:pointer;border-radius:2px;padding:15px;font-size:.98rem;font-weight:600;letter-spacing:.16em;color:#fff;background:var(--orange)}
.tpn-submit button:active{transform:scale(.99)}
.tpn-form-done{background:#E9F6EE;border:1px solid #B9E3C9;color:#2E7D4F;border-radius:12px;padding:18px;line-height:1.7}
.tpn-form-err{background:#FDECEA;border:1px solid #F5C2BC;color:#C0392B;border-radius:12px;padding:12px 16px;margin-bottom:12px}
.tpn-form-err ul{margin:0;padding-left:1.1em}

/* === コラム目次(2026-06-28) === */
.tpn-toc{background:var(--cream);border:1px solid var(--line);border-radius:2px;padding:14px 16px;margin:0 0 22px}
.tpn-toc-h{font-weight:800;margin:0 0 8px;font-size:.95rem}
.tpn-toc ul{list-style:none;margin:0;padding:0}
.tpn-toc li{margin:4px 0;line-height:1.5}
.tpn-toc li.lv3{padding-left:1.1em;font-size:.9rem}
.tpn-toc a{color:#2A6F97;text-decoration:none;border-bottom:1px dotted #9CC4DA}
.tpn-toc a:active{opacity:.7}
.art .body h2,.art .body h3{scroll-margin-top:72px}
html{scroll-behavior:smooth}


/* ===== 記事下: エリア回遊導線（横展開・2026-07-25） ===== */
.col-areas{margin:34px 0 8px;padding:18px 16px 16px;background:#fff;border:1px solid var(--line,#ECE3D4);border-top:3px solid var(--orange,#F5853F);border-radius:4px}
.col-areas h2{font-size:1.05rem;font-weight:800;margin:0 0 4px;padding:0;border:none}
.col-areas .col-areas-lead{color:var(--muted,#8C8475);font-size:.85rem;margin:0 0 13px}
.col-areas .chips{display:flex;flex-wrap:wrap;gap:9px}
.col-areas .chips a{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--orange,#F5853F);border-radius:999px;padding:9px 15px;font-size:.92rem;font-weight:800;color:var(--orange,#F5853F);background:#fff;text-decoration:none}
.col-areas .chips a:active{background:var(--orange,#F5853F);color:#fff}
.col-areas .chips a span{font-size:.72rem;font-weight:700;opacity:.6}
.col-areas .col-areas-all{display:block;text-align:center;margin-top:15px;background:var(--orange,#F5853F);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.1em;border-radius:3px;padding:14px 20px}