/* ============================================================
   泉州クラフトビール案内所
   配色・部品はここに集約。別テーマのサイトを作るときは
   :root の色と本文を差し替えれば流用できる。
   ============================================================ */
:root{
  --bg:#12100e;
  --surface:#211d1a;
  --sunk:#2a2521;
  --band:#312516;           /* 店名の帯（琥珀寄りの暖色） */
  --ink:#f4efe6;
  --ink-mid:#d5cec4;
  --ink-dim:#a79f95;
  --accent:#e8a13c;         /* 琥珀 */
  --accent-deep:#c07d22;
  --accent-soft:#2a2015;
  --hop:#93b05a;            /* ホップの緑 */
  --line:#3a332d;
  --line-soft:#2e2823;
  --star:#e3c274;
  --star-bg:#2b2415;
  --star-line:#5a4a20;
  --warn-bg:#2e1d16;
  --warn-line:#5e3826;
  --warn-ink:#f0a882;
  --wrap:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} }

html{font-size:100%}
/* 画面が広いほど文字を大きく。スマホは1行の文字数が減りすぎるので据え置き。
   %で指定しているので、ブラウザ側の文字サイズ設定も効く */
@media (min-width:768px) { html{font-size:106.25%} }  /* 17px相当 */
@media (min-width:1100px){ html{font-size:112.5%}  }  /* 18px相当 */

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.7;
  font-size:1rem;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--accent)}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---------- 固定ヘッダー（ヒーローを過ぎたら出る） ---------- */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:rgba(18,16,14,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%); transition:transform .25s ease;
}
.bar.on{transform:translateY(0)}
.bar-in{
  max-width:var(--wrap); margin:0 auto; padding:11px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.bar-name{font-size:.9rem; font-weight:700; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar-nav{display:flex; gap:14px; flex:0 0 auto}
.bar-nav a{font-size:.8rem; color:var(--ink-mid); text-decoration:none; white-space:nowrap}
.bar-nav a:hover{color:var(--accent)}

/* ---------- ヒーロー ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden}
@supports (min-height:88svh){ .hero{min-height:88svh} }
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% center}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(18,16,14,.94) 0%, rgba(18,16,14,.86) 34%, rgba(18,16,14,.30) 62%, rgba(18,16,14,.10) 100%),
    linear-gradient(to bottom, rgba(18,16,14,.55) 0%, rgba(18,16,14,0) 28%, rgba(18,16,14,0) 62%, var(--bg) 100%);
}
.hero-in{position:relative; width:100%; max-width:1080px; margin:0 auto; padding:0 20px}
.hero h1{
  font-size:clamp(1.58rem, 6.4vw, 3.15rem);
  line-height:1.28; margin:0 0 18px; letter-spacing:.01em;
  text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.hero-catch{
  font-size:clamp(1rem, 2.9vw, 1.22rem); line-height:1.75;
  margin:0 0 22px; max-width:26em; color:var(--ink);
  text-shadow:0 2px 16px rgba(0,0,0,.75);
}
.hero-area{
  font-size:clamp(.76rem, 2.2vw, .87rem); letter-spacing:.06em;
  color:var(--accent); margin:0; text-shadow:0 2px 12px rgba(0,0,0,.8);
}

/* ---------- リード ---------- */
.lead{padding:52px 0 8px; font-size:1rem}
.lead p{margin:0 0 15px} .lead p:last-child{margin:0}
.lead b{color:var(--ink)}

/* ---------- セクション見出し ---------- */
.sec{margin:70px 0 0}
.sec-no{font-size:.7rem; letter-spacing:.2em; color:var(--accent); font-weight:700; margin:0 0 6px}
.sec h2{font-size:clamp(1.2rem,4vw,1.5rem); margin:0; line-height:1.4; letter-spacing:.01em}
.sec-note{color:var(--ink-dim); font-size:.95rem; margin:10px 0 26px}

/* ---------- 部品：エリア表示（店名の上） ---------- */
.area{
  font-size:.82rem; letter-spacing:.11em; color:var(--accent);
  font-weight:700; margin:0 0 8px;
}

/* ---------- 部品：大きいカード ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  margin:0 0 34px; overflow:hidden;
}
.card-head{padding:20px 26px 22px}

/* 見出しの帯：「ここが店の名前」と分かるようにする部分。
   グラスの印が名前そのものを指し、市町名は印の幅ぶん右へずらして
   店名の頭にそろえる（左の縦線をそろえるため） */
.band{background:var(--band); padding:22px 26px 20px; border-bottom:1px solid var(--line)}
.band .area{margin-left:36px}
.band h3{margin:0; display:flex; align-items:flex-start; gap:11px}
.band h3 .mk{flex:0 0 auto; margin-top:.14em; color:var(--accent)}
.card h3{margin:0 0 12px; font-size:clamp(1.32rem,4.6vw,1.65rem); line-height:1.32; letter-spacing:-.01em}
.card h3 small{display:block; font-size:.6em; color:var(--ink-mid); font-weight:400; margin-top:5px; letter-spacing:0}
.oneline{
  margin:0; font-size:clamp(.97rem,3.1vw,1.06rem); font-weight:700; line-height:1.72;
  border-left:3px solid var(--accent); padding:1px 0 1px 14px;
}

/* ---------- 部品：写真 ---------- */
.photo{background:var(--sunk); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:18px 26px}
.photo-t{font-size:.71rem; letter-spacing:.13em; color:var(--ink-dim); font-weight:700; margin:0 0 12px}
.instagram-media{margin:0 auto !important; min-width:0 !important; max-width:100% !important}
.ph-fallback{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:16px 18px;
}
.ph-fallback:hover{border-color:var(--accent)}
.ph-fallback svg{flex:0 0 auto}
.ph-fallback .t{display:block; font-size:.95rem; font-weight:700; color:var(--ink)}
.ph-fallback .d{display:block; font-size:.9rem; color:var(--ink-dim); margin-top:2px; line-height:1.6}

/* ---------- 部品：カード本文 ---------- */
.card-body{padding:24px 26px 26px}
.beer{background:var(--accent-soft); border-radius:11px; padding:15px 17px; margin:0 0 20px}
.beer > b{display:block; color:var(--accent); font-weight:800; font-size:.71rem; letter-spacing:.13em; margin:0 0 6px}
.beer span{display:block; font-size:1rem; line-height:1.72}
.beer span b{color:var(--ink); font-weight:700}
.warn{
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:11px;
  padding:15px 18px; margin:0 0 20px; font-size:.99rem; color:var(--warn-ink); line-height:1.72;
}
.body p{margin:0 0 15px; font-size:1rem; color:var(--ink-mid)}
.body p:last-child{margin:0 0 4px}
.body b{color:var(--ink)}

/* ---------- 部品：データ表 ---------- */
.facts{list-style:none; padding:0; margin:16px 0 0}
.facts li{display:flex; gap:16px; padding:4px 0; border-top:1px solid var(--line-soft); font-size:.97rem; line-height:1.45}
.facts .k{
  flex:0 0 6.6rem; color:var(--ink); font-size:.93rem; font-weight:700;
  letter-spacing:.02em; padding-top:1px;
}
.facts .v{flex:1; color:var(--ink-mid); min-width:0; overflow-wrap:anywhere}

/* ---------- 部品：地図（カード本文の中に置く） ---------- */
.map{margin:0 0 20px}
.map-t{font-size:.71rem; letter-spacing:.13em; color:var(--ink-dim); font-weight:700; margin:0 0 10px}
.map-frame{
  position:relative; display:block; text-decoration:none;
  border-radius:11px; overflow:hidden; border:1px solid var(--line); background:#1a1714;
}
.map-frame:hover{border-color:var(--accent)}
.map-frame iframe{width:100%; height:210px; border:0; display:block; pointer-events:none}
.map-open{
  position:absolute; right:10px; bottom:10px;
  background:rgba(18,16,14,.92); color:var(--accent); border:1px solid var(--line);
  font-size:.76rem; font-weight:700; padding:6px 13px; border-radius:999px; letter-spacing:.02em;
}

/* ---------- 部品：リンクカード ---------- */
.links{padding:22px 26px 24px; background:var(--sunk); border-top:1px solid var(--line-soft)}
.links-t{font-size:.71rem; letter-spacing:.13em; color:var(--ink-dim); font-weight:700; margin:0 0 12px}
.lc{
  display:block; text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-radius:11px; padding:13px 16px; margin:0 0 9px;
}
.lc:last-of-type{margin-bottom:0}
.lc:hover{border-color:var(--accent)}
.lc .n{display:block; font-size:.94rem; font-weight:700; color:var(--ink)}
.lc .n::after{content:" ↗"; color:var(--ink-dim); font-weight:400; font-size:.8rem}
.lc .d{display:block; font-size:.9rem; color:var(--ink-dim); margin-top:2px; line-height:1.6}
.checked{color:var(--ink-dim); font-size:.87rem; margin:14px 0 0}

/* ---------- 部品：小さいカード ---------- */
.mini{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:20px 22px; margin:0 0 15px}
.mini h4{margin:0 0 5px; font-size:1.1rem; line-height:1.4}
.mini .addr{font-size:.9rem; color:var(--ink-dim); margin:0 0 11px}
.mini p{margin:0; font-size:1rem; color:var(--ink-mid)}
.mini b{color:var(--ink)}
.mini .lc{margin-top:13px}

/* ---------- 部品：ブルワリー ---------- */
.brew{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:22px; margin:0 0 18px}
.brew h4{margin:0 0 6px; font-size:1.16rem; line-height:1.4}

/* ブルワリー側の帯（店カードと同じ考え方。文字が一回り小さいので印も小さく） */
.brew{overflow:hidden}
.brew .band{margin:-22px -22px 18px; padding:19px 22px 17px; border-radius:12px 12px 0 0}
.brew .band .area{margin-left:32px}
.brew .band h4{margin:0; display:flex; align-items:flex-start; gap:11px}
.brew .band h4 .mk{flex:0 0 auto; margin-top:.16em; color:var(--accent)}
.brew h4 small{display:block; font-size:.68em; color:var(--ink-mid); font-weight:400; margin-top:4px}
.brew-lead{
  margin:0 0 16px; font-size:1.02rem; font-weight:700; line-height:1.7;
  border-left:3px solid var(--accent); padding:1px 0 1px 13px;
}
.brew p{font-size:1rem; color:var(--ink-mid); margin:0 0 13px}
.brew p b{color:var(--ink)}
.brew .facts{margin:16px 0 0}
.brew .map{margin:18px 0 0}
.brew .lc{margin-top:12px}

/* 番外編（本編と同格ではないことを、見た目で示す） */
.side-t{
  font-size:.72rem; letter-spacing:.16em; font-weight:700; color:var(--ink-dim);
  margin:40px 0 14px; padding-top:24px; border-top:1px solid var(--line);
}
.brew.side{background:none; border-style:dashed}
.brew.side .beer{margin:16px 0 0}
.brew.side .checked{margin:14px 0 0}

/* ---------- 訪問メモ（カードの中に置く） ---------- */
.memo{background:var(--star-bg); border:1px solid var(--star-line); border-radius:12px; padding:18px 20px; margin:0 0 20px}
.memo-t{font-size:.72rem; letter-spacing:.12em; color:var(--star); font-weight:800; margin:0 0 9px}
.memo p{margin:0 0 12px; font-size:1rem; color:var(--ink)} .memo p:last-child{margin:0}
.memo b{color:#fff}

/* ---------- このサイトについて ---------- */
.about{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:26px; font-size:1rem}
.about h3{font-size:1.12rem; margin:32px 0 10px; color:var(--ink)} .about h3:first-child{margin-top:0}
.about p{margin:0 0 13px; color:var(--ink-mid)} .about p:last-child{margin:0}
.about b{color:var(--ink)}
.about .rule{
  background:var(--accent-soft); border-left:3px solid var(--accent);
  padding:13px 16px; border-radius:0 9px 9px 0; color:var(--ink);
}

footer{margin:70px 0 0; padding:26px 0 60px; border-top:1px solid var(--line); color:var(--ink-dim); font-size:.92rem}
footer p{margin:0 0 8px} footer p:last-child{margin:0}
footer b{color:var(--ink-mid)}

@media(max-width:600px){
  .wrap{padding:0 16px}
  .hero{min-height:82vh}
  @supports (min-height:82svh){ .hero{min-height:82svh} }
  .hero-in{padding:0 16px; align-self:flex-start; margin-top:16vh}
  .hero{align-items:flex-start}
  .hero-veil{background:
    linear-gradient(to bottom, rgba(18,16,14,.92) 0%, rgba(18,16,14,.80) 38%, rgba(18,16,14,.25) 62%, var(--bg) 100%);}
  .card-head,.card-body,.photo,.links,.band{padding-left:18px; padding-right:18px}
  .facts li{flex-direction:column; gap:2px} .facts .k{flex:none}
  .mini,.memo,.about{padding:20px 18px}
}

/* ---------- サブページ ---------- */
.subpage{padding:46px 0 0}
.back{margin:0 0 22px}
.back a{font-size:.85rem; color:var(--ink-mid); text-decoration:none}
.back a:hover{color:var(--accent)}
.subtitle{font-size:clamp(1.5rem,5vw,2rem); margin:0 0 8px; line-height:1.35}
.subpage .meta{margin:0 0 34px; padding-bottom:0; border:0}