/*
Theme Name: 酒蔵.me
Theme URI: https://sakagura.me/
Author: sakagura.me
Description: 酒蔵.me 用の自作テーマ。蔵詳細(single-brewery)を詳細デザインに沿って実装。CSSはデザインシステム(トークン)化し、今後のトップ・一覧にも流用する。
Version: 0.2.0
Text Domain: sakagura
*/

/* =========================================================
   デザインシステム（トークン）— 今後トップ/一覧でも使い回す
   ========================================================= */
:root{
  --navy:#1f3a5f;         /* 見出し・ヘッダー帯・主要色 */
  --navy-700:#16304f;
  --ink:#1a1a1a;          /* 本文 */
  --muted:#6b7684;        /* 補足テキスト */
  --line:#e3e7ec;         /* 罫線 */
  --bg:#ffffff;
  --bg-soft:#f4f6f9;      /* 淡い背景 */
  --chip-bg:#eef2f7;      /* バッジ既定背景 */
  --chip-ink:#3a5573;
  --amber:#c8781f;        /* 要予約など注意系 */
  --green:#2e7d55;        /* 予約不要など肯定系 */
  --amazon:#e59400;       /* Amazonボタン */
  --rakuten:#bf0000;      /* 楽天ボタン */
  --radius:12px;
  --radius-sm:8px;
  --gap:24px;
  --maxw:1120px;
  --font: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:var(--font); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--navy); }
img{ max-width:100%; height:auto; display:block; }

/* ---- 汎用レイアウト ---- */
.skg-container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.skg-cols{ display:grid; grid-template-columns: 1fr 320px; gap:40px; align-items:start; }
@media (max-width: 900px){
  .skg-cols{ grid-template-columns:1fr; gap:28px; }
}

/* ---- サイト簡易ヘッダー/フッター（最小） ---- */
.skg-siteheader{ border-bottom:1px solid var(--line); background:#fff; }
.skg-siteheader .inner{ max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:20px; }
.skg-logo{ font-weight:800; color:var(--navy); text-decoration:none; font-size:20px; letter-spacing:.02em; }
.skg-nav{ display:flex; gap:16px; font-size:14px; flex-wrap:wrap; }
.skg-nav a{ color:var(--ink); text-decoration:none; }
.skg-nav a:hover{ color:var(--navy); }
.skg-sitefooter{ border-top:1px solid var(--line); margin-top:56px; }
.skg-sitefooter .inner{ max-width:var(--maxw); margin:0 auto; padding:20px; color:var(--muted); font-size:13px; }

/* =========================================================
   詳細ページ
   ========================================================= */

/* パンくず */
.skg-breadcrumb{ font-size:13px; color:var(--muted); padding:16px 0 0; }
.skg-breadcrumb a{ color:var(--muted); text-decoration:none; }
.skg-breadcrumb a:hover{ text-decoration:underline; }
.skg-breadcrumb .sep{ margin:0 6px; color:#c2c9d2; }

/* ヘッダー帯：左に情報／右にステータス枠のflex。絶対配置をやめ見切れを解消 */
.skg-hero{ background:var(--bg-soft); border-radius:var(--radius); padding:28px; margin:14px 0 32px;
  display:flex; gap:28px; align-items:flex-start; }
.skg-hero .hero-main{ flex:1 1 auto; min-width:0; }
.skg-hero .kicker{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.skg-tag{ display:inline-block; font-size:12px; font-weight:700; color:#fff; background:var(--navy);
  padding:3px 10px; border-radius:999px; letter-spacing:.02em; }
.skg-tag.is-outline{ background:#fff; color:var(--chip-ink); border:1px solid var(--line); }
.skg-hero h1{ font-size:30px; line-height:1.25; margin:2px 0 4px; color:var(--ink); }
.skg-hero .subtitle{ color:var(--muted); font-size:14px; margin:0 0 14px; }
.skg-hero .lead{ font-size:15px; color:#33404d; margin:0 0 20px; max-width:640px; }
.skg-hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }

/* ボタン */
.skg-btn{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  padding:11px 18px; border-radius:var(--radius-sm); text-decoration:none; cursor:pointer; border:1px solid transparent; }
.skg-btn--primary{ background:var(--navy); color:#fff; }
.skg-btn--primary:hover{ background:var(--navy-700); }
.skg-btn--ghost{ background:#fff; color:var(--navy); border-color:var(--line); }
.skg-btn--ghost:hover{ border-color:var(--navy); }
.skg-btn--amazon{ background:var(--amazon); color:#fff; justify-content:center; }
.skg-btn--rakuten{ background:var(--rakuten); color:#fff; justify-content:center; }
.skg-btn--block{ width:100%; }

/* 見学ステータス枠（6項目カード）：flexの子として自然な高さで並ぶ */
.skg-status{ flex:0 0 340px; width:340px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 6px 20px rgba(20,40,70,.06); overflow:hidden; align-self:stretch; }
.skg-status .st-head{ background:var(--navy); color:#fff; padding:11px 16px; font-size:13px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; }
.skg-status .st-head .upd{ font-weight:400; opacity:.85; font-size:11px; }
.skg-status .st-grid{ display:grid; grid-template-columns:1fr 1fr; }
.skg-status .st-cell{ padding:12px 16px; border-top:1px solid var(--line); }
.skg-status .st-cell:nth-child(odd){ border-right:1px solid var(--line); }
.skg-status .st-label{ font-size:11px; color:var(--muted); margin-bottom:3px; }
.skg-status .st-value{ font-size:14px; font-weight:700; color:var(--ink); line-height:1.4; }
.skg-status .st-value.amber{ color:var(--amber); }
.skg-status .st-value.green{ color:var(--green); }
/* 狭い画面ではヘッダーを縦積み、ステータス枠は全幅 */
@media (max-width: 1040px){
  .skg-hero{ flex-direction:column; }
  .skg-status{ flex-basis:auto; width:100%; }
}

/* セクション見出し */
.skg-section{ margin:0 0 36px; }
.skg-section > h2{ font-size:20px; color:var(--ink); margin:0 0 14px; padding-bottom:8px;
  border-bottom:2px solid var(--navy); display:inline-block; }

/* 詳細テーブル */
.skg-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.skg-table th, .skg-table td{ text-align:left; vertical-align:top; padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px; }
.skg-table tr:last-child th, .skg-table tr:last-child td{ border-bottom:none; }
.skg-table th{ width:160px; background:var(--bg-soft); color:var(--muted); font-weight:700; white-space:nowrap; }

/* バッジ列（一覧カード等でも使う） */
.skg-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.skg-badge{ display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:6px;
  background:var(--chip-bg); color:var(--chip-ink); }
.skg-badge.amber{ background:#fbeee0; color:var(--amber); }
.skg-badge.green{ background:#e4f2ea; color:var(--green); }

/* アクセス */
.skg-map-placeholder{ background:repeating-linear-gradient(45deg,#eef2f7,#eef2f7 10px,#e7ecf3 10px,#e7ecf3 20px);
  border:1px solid var(--line); border-radius:var(--radius); height:260px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:13px; }
.skg-access-foot{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.skg-access-foot .addr{ font-size:14px; color:var(--ink); }

/* 近くの酒蔵 */
.skg-nearby-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 700px){ .skg-nearby-grid{ grid-template-columns:1fr; } }
.skg-nearby-card{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; text-decoration:none; color:inherit; display:block; }
.skg-nearby-card:hover{ border-color:var(--navy); }
.skg-nearby-card .nm{ font-weight:700; font-size:15px; margin-bottom:2px; }
.skg-nearby-card .ct{ font-size:12px; color:var(--muted); margin-bottom:8px; }

/* ---- サイドバー ---- */
.skg-card{ border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:20px; }
.skg-card .card-eyebrow{ font-size:11px; color:var(--muted); letter-spacing:.04em; margin-bottom:10px; }
.skg-aff .aff-row{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.skg-aff .bottle{ width:56px; height:72px; flex:0 0 56px; background:var(--bg-soft); border:1px solid var(--line);
  border-radius:6px; display:flex; align-items:center; justify-content:center; color:#aeb6c1; font-size:10px; overflow:hidden; }
.skg-aff .bottle img{ width:100%; height:100%; object-fit:cover; }
.skg-aff .aff-name{ font-weight:700; font-size:14px; }
.skg-aff .aff-sub{ font-size:12px; color:var(--muted); }
.skg-aff .aff-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.skg-pr .pr-title{ font-weight:700; margin:4px 0 4px; }
.skg-pr p{ font-size:13px; color:var(--muted); margin:0 0 12px; }
.skg-adslot{ border:1px dashed var(--line); border-radius:var(--radius); height:250px; display:flex; align-items:center; justify-content:center; color:#b7bec8; font-size:12px; }

/* デバッグ用の名残（未使用でも害なし） */
.sakagura-note{ font-size:13px; color:var(--muted); }

/* =========================================================
   トップページ（front-page）
   ========================================================= */

/* ヒーロー */
.skg-home-hero{ border-bottom:1px solid var(--line); background:
  linear-gradient(180deg,#fff 0%, var(--bg-soft) 100%); }
.skg-home-hero .hero-inner{ display:grid; grid-template-columns:1fr 300px; gap:40px; padding:48px 20px 52px; align-items:center; }
@media (max-width: 900px){ .skg-home-hero .hero-inner{ grid-template-columns:1fr; gap:28px; } }
.hero-kicker{ font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--navy); margin-bottom:14px; }
.hero-title{ font-size:40px; line-height:1.25; margin:0 0 16px; color:var(--ink); font-weight:800; letter-spacing:.01em; }
@media (max-width: 600px){ .hero-title{ font-size:30px; } }
.hero-lead{ font-size:15px; color:#33404d; max-width:560px; margin:0 0 22px; }
.hero-search{ display:flex; gap:10px; max-width:520px; margin:0 0 14px; }
.hero-search input[type="search"]{ flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:14px; font-family:var(--font); background:#fff; }
.hero-search input[type="search"]:focus{ outline:none; border-color:var(--navy); }
.hero-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.hero-chip{ font-size:12px; font-weight:600; color:var(--chip-ink); background:#fff; border:1px solid var(--line);
  padding:6px 12px; border-radius:999px; }
.hero-chip.is-on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.hero-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-stats .stat{ text-decoration:none; color:inherit; display:flex; align-items:baseline; gap:6px; }
.hero-stats .num{ font-size:26px; font-weight:800; color:var(--navy); }
.hero-stats .lbl{ font-size:13px; color:var(--muted); }
.hero-stats .stat:hover .num{ text-decoration:underline; }

.hero-visual{ position:relative; display:flex; gap:12px; justify-content:flex-end; }
.hero-photo{ flex:1; min-height:280px; border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,#e9eef4,#e9eef4 10px,#e2e8f0 10px,#e2e8f0 20px);
  display:flex; align-items:center; justify-content:center; color:#aeb6c1; font-size:12px; }
.hero-vertical{ writing-mode:vertical-rl; text-orientation:upright; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 8px; font-size:13px; letter-spacing:.15em; color:var(--muted); background:#fff; white-space:nowrap; }

/* 地図から探す */
.skg-home-map{ padding:44px 0; background:#0f1f33; }
.skg-home-map .map-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.skg-home-map h2{ color:#fff; font-size:20px; margin:0; }
.skg-home-map h2 .en{ color:#7f93ab; font-size:12px; font-weight:400; margin-left:10px; letter-spacing:.08em; }
.map-legend{ display:flex; gap:16px; color:#c7d2df; font-size:12px; }
.map-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
.dot-sake{ background:#4f7cff; } .dot-wine{ background:#a25bd6; } .dot-beer{ background:#e0b73a; } .dot-spirits{ background:#3fbf8f; }
.map-placeholder{ height:420px; border-radius:var(--radius);
  background:repeating-linear-gradient(45deg,#16304f,#16304f 12px,#132a45 12px,#132a45 24px);
  display:flex; align-items:center; justify-content:center; color:#6b83a0; font-size:13px; }

/* 今月の蔵 */
.skg-home-featured{ padding:48px 0; }
.feat-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px; flex-wrap:wrap; gap:8px; }
.feat-head h2{ font-size:20px; margin:0; color:var(--ink); }
.feat-head h2 .en{ color:var(--muted); font-size:12px; font-weight:400; margin-left:10px; letter-spacing:.08em; }
.feat-note{ font-size:12px; color:var(--muted); }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width: 860px){ .feat-grid{ grid-template-columns:1fr; } }
.feat-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.feat-card:hover{ border-color:var(--navy); box-shadow:0 6px 20px rgba(20,40,70,.06); }
.feat-photo{ aspect-ratio:16/10; background:repeating-linear-gradient(45deg,#eef2f7,#eef2f7 10px,#e7ecf3 10px,#e7ecf3 20px);
  display:flex; align-items:center; justify-content:center; color:#aeb6c1; font-size:12px; }
.feat-photo img{ width:100%; height:100%; object-fit:cover; }
.feat-body{ padding:16px; }
.feat-title-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.feat-name{ font-weight:700; font-size:16px; }
.feat-place{ font-size:12px; color:var(--muted); }
.feat-desc{ font-size:13px; color:#4a5561; margin:0 0 12px; }

/* PR2枠 */
.skg-home-pr{ padding:8px 0 8px; }
.pr-2col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 700px){ .pr-2col{ grid-template-columns:1fr; } }
.pr-block .pr-eyebrow{ font-weight:700; font-size:14px; margin-bottom:6px; }
.pr-block .pr-eyebrow .tag{ font-size:10px; font-weight:700; color:var(--chip-ink); background:var(--chip-bg);
  padding:2px 8px; border-radius:999px; margin-left:6px; }
.pr-block p{ font-size:13px; color:var(--muted); margin:0 0 12px; }
.pr-block .pr-link{ font-weight:700; font-size:14px; color:var(--navy); text-decoration:none; }
.pr-block .pr-link:hover{ text-decoration:underline; }

/* 広告（ワイド） */
.skg-adslot--wide{ height:120px; margin:28px 0; }

/* =========================================================
   一覧・アーカイブ（archive-brewery）
   ========================================================= */
.skg-arch-hero{ padding:8px 0 4px; }
.skg-arch-hero h1{ font-size:26px; margin:6px 0 6px; color:var(--ink); }
.skg-arch-hero h1 .cnt{ font-size:15px; color:var(--navy); font-weight:700; margin-left:8px; }
.skg-arch-hero .lead{ font-size:14px; color:var(--muted); margin:0 0 20px; }

.skg-arch-layout{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
@media (max-width: 860px){ .skg-arch-layout{ grid-template-columns:1fr; } }

/* 左サイド */
.skg-arch-side .side-box{ border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px; }
.skg-arch-side .side-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; }
.area-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.area-chip{ font-size:13px; text-decoration:none; color:var(--chip-ink); background:var(--chip-bg);
  padding:6px 12px; border-radius:999px; }
.area-chip:hover{ background:#e2e8f0; }
.area-chip.is-active{ background:var(--navy); color:#fff; }
.area-empty{ font-size:12px; color:var(--muted); }
.side-minimap{ border:1px solid var(--line); border-radius:var(--radius); height:220px;
  background:repeating-linear-gradient(45deg,#eef2f7,#eef2f7 10px,#e7ecf3 10px,#e7ecf3 20px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:#aeb6c1; font-size:13px; text-align:center; }
.side-minimap span{ font-size:11px; }

/* カードリスト */
.skg-arch-list{ display:flex; flex-direction:column; gap:16px; }
.skg-arch-card{ border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  display:flex; gap:20px; justify-content:space-between; align-items:flex-start; }
@media (max-width: 560px){ .skg-arch-card{ flex-direction:column; } }
.skg-arch-card .card-body{ flex:1; min-width:0; }
.skg-arch-card .card-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.skg-arch-card .card-name{ font-size:18px; margin:0; }
.skg-arch-card .card-name a{ text-decoration:none; color:var(--ink); }
.skg-arch-card .card-name a:hover{ color:var(--navy); }
.skg-arch-card .card-meta{ font-size:12px; color:var(--muted); }
.skg-arch-card .card-desc{ font-size:14px; color:#4a5561; margin:0 0 12px; }
.skg-arch-card .card-actions{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
@media (max-width: 560px){ .skg-arch-card .card-actions{ align-items:flex-start; } }
.card-buy{ font-size:12px; color:var(--muted); }
.card-buy .buy-a{ color:var(--amazon); font-weight:700; text-decoration:none; }
.card-buy .buy-r{ color:var(--rakuten); font-weight:700; text-decoration:none; }

.skg-adslot--infeed{ height:100px; margin:16px 0; }

/* ページネーション */
.skg-pagination{ display:flex; gap:8px; justify-content:center; margin:28px 0 8px; flex-wrap:wrap; }
.skg-pagination .page-numbers{ display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  text-decoration:none; color:var(--navy); font-size:14px; }
.skg-pagination .page-numbers.current{ background:var(--navy); color:#fff; border-color:var(--navy); }
.skg-pagination .page-numbers.dots{ border:none; }

.skg-arch-empty{ color:var(--muted); padding:40px 0; }