/* SAKENOTE LAB の見た目
   赤・紺は会社サイト sakenote.net の値。外部画像なし（CSS とインラインSVGのデータだけ） */
:root {
  --red: #C1392C; --red-2: #CD4633; --navy: #10165B;
  --sumi: #232220; --ink: #252525; --muted: #5d574c;
  --washi: #F7F2E6; --kinari: #FBF6E9; --torinoko: #EADBB8;
  --wood: #9A6A43; --wood-d: #6B4527; --line: #DED4BF;
  --kin: #C9A75A;                                   /* 金（平） */
  --kin-g: linear-gradient(115deg, #a8843c 0%, #f1dc9c 26%, #b8913f 44%, #f7e9b8 60%, #a98238 80%, #e2c67e 100%); /* 箔 */
  --felt: #24493D; --ai: #1F3163;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --fude: "Yuji Syuku", var(--mincho);
  --hero: "Shippori Mincho B1", var(--mincho);

  /* 和紙：長い繊維＋細かい粒（明るい地用 / 暗い地用）。どのラベルもこの2枚を使い回す */
  --fiber: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.004 .12' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .46 0 0 0 0 .36 0 0 0 0 .22 0 0 0 -14 6'/><feComponentTransfer><feFuncA type='linear' slope='.3'/></feComponentTransfer></filter><rect width='260' height='260' filter='url(%23f)'/></svg>");
  --grain: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 -16 7.4'/><feComponentTransfer><feFuncA type='linear' slope='.22'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23g)'/></svg>");
  --fiber-l: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.004 .12' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .98 0 0 0 0 .95 0 0 0 0 .86 0 0 0 -14 6'/><feComponentTransfer><feFuncA type='linear' slope='.16'/></feComponentTransfer></filter><rect width='260' height='260' filter='url(%23f)'/></svg>");
  /* 朱印のかすれ（生成りの点を朱の上に散らす） */
  --kasure: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .98 0 0 0 0 .96 0 0 0 0 .9 0 0 0 -18 8.3'/><feComponentTransfer><feFuncA type='linear' slope='.7'/></feComponentTransfer></filter><rect width='120' height='120' filter='url(%23k)'/></svg>");
  /* 牌を並べた地紋 */
  --tilegrid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='32'><rect x='3' y='3' width='18' height='26' rx='3' fill='none' stroke='%23F7F2E6' stroke-opacity='.11'/></svg>");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  background-color: var(--washi);
  background-image: var(--fiber), var(--grain);
  background-size: 260px 260px, 180px 180px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 500; line-height: 1.75; overflow-wrap: anywhere;
}
a { color: var(--red); }
img { max-width: 100%; height: auto; }

.site-head { padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--kinari); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none; font-size: 1.1rem; } /* ロゴだけだと28pxで指に小さい */
.back img { width: 150px; height: auto; display: block; }

.en { display: block; font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: .14em; font-size: .74rem; color: var(--red); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .face .foil { background-image: var(--kin-g); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 各ラベルの文字色より強く */
}

/* 一番上のラベルの下の板（木目） */
.plank {
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 1px, transparent 1px 29px, rgba(255,255,255,.06) 29px 30px, transparent 30px 47px), linear-gradient(#b0805a, var(--wood-d));
  box-shadow: 0 4px 4px rgba(0,0,0,.14); border-radius: 1px;
}

/* ===== 一番上：大きな1枚のラベル（和紙・金の二重罫・隅金具） ===== */
.hero { padding: 32px 16px 28px; text-align: center; }
.label-hero {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  padding: 24px 32px 26px;
  background-color: var(--kinari); background-image: var(--fiber), var(--grain);
  background-size: 260px 260px, 180px 180px;
  border: 1px solid var(--sumi); box-shadow: 0 3px 0 rgba(0,0,0,.06);
}
.label-hero::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--kin); box-shadow: inset 0 0 0 3px var(--kinari), inset 0 0 0 4px var(--kin); pointer-events: none; }
.label-hero::after, .kado::after {
  content: ""; position: absolute; inset: var(--kado-in, 13px); pointer-events: none;
  --c: var(--kado-c, var(--kin));
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 14px 2px, linear-gradient(var(--c), var(--c)) 0 0 / 2px 14px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 14px 2px, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 14px,
    linear-gradient(var(--c), var(--c)) 0 100% / 14px 2px, linear-gradient(var(--c), var(--c)) 0 100% / 2px 14px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 14px 2px, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 14px;
  background-repeat: no-repeat;
}
.label-hero .en { position: relative; z-index: 1; background: var(--red); color: #fff; padding: 2px 8px; font-size: .66rem; letter-spacing: .16em; }
.hero h1 {
  position: relative; z-index: 1;
  writing-mode: vertical-rl; height: 4.3em; margin: 16px 0 0; white-space: nowrap; /* 1行4字ぶんの高さ。折り返さない */
  font-family: var(--hero); font-weight: 800; color: var(--sumi);
  font-size: clamp(2.6rem, 12.2vw, 4rem); line-height: 1.5; letter-spacing: .06em; /* 幅360pxでラベル約264px・最大で約354px */
}
.plank { display: block; height: 12px; max-width: 420px; margin: 0 auto; }
.lead { margin: 22px 0 18px; font-size: .95rem; }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ボタン：角の立った札 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 8px 22px; border: 1.5px solid var(--sumi); border-radius: 2px;
  background: var(--kinari); color: var(--sumi);
  font: inherit; font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  text-decoration: none; cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--sumi); color: var(--kinari); }
.btn-main { background: var(--red); border-color: var(--red); color: #fff; box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(255,255,255,.6); }
.btn-main:hover, .btn-main:focus-visible { background: var(--red-2); border-color: var(--red-2); }
.hero-btns .btn { min-width: 8.5em; font-size: 1.05rem; letter-spacing: .12em; } /* 扉の2つは同じ幅に */

/* 区切り */
.block { padding: 32px max(16px, calc((100% - 960px) / 2)); }
.block-dark { background-color: rgba(214, 196, 158, .28); }
h2 { font-family: var(--fude); font-weight: 400; font-size: 1.6rem; line-height: 1.4; margin: 0 0 18px; color: var(--sumi); letter-spacing: .06em; }

/* 棚の名前＝朱印（白抜きの文字・内側に細い罫・かすれ） */
.shelf + .shelf { margin-top: 30px; }
.shelf h3 {
  position: relative; display: inline-block; margin: 0 0 8px; padding: 4px 13px 3px;
  background: var(--red); color: var(--kinari); border-radius: 4px;
  font-family: var(--fude); font-weight: 400; font-size: 1.1rem; line-height: 1.5; letter-spacing: .12em;
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(251,246,233,.85);
  transform: rotate(-1.5deg);
}
.shelf h3::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--kasure); background-size: 120px 120px; pointer-events: none; }
.shelf-note { margin: 0 0 14px; font-size: .88rem; color: var(--muted); }
.shelf-note a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }

/* ===== 作品の札（あそぶ・しらべる共通）：上＝1:1の絵の枠、下＝白い札（一行・出典） ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 22px 14px; }
.card {
  display: flex; flex-direction: column; min-height: 44px;
  background: #fff; border: 1px solid rgba(0,0,0,.45); box-shadow: 0 2px 0 rgba(0,0,0,.06);
  color: var(--ink); text-decoration: none;
}
.card:hover, .card:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.art {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.45);
  background-color: var(--kinari); background-image: var(--fiber), var(--grain); background-size: 260px 260px, 180px 180px;
}
.fuda { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; }
.fuda .copy { font-size: .85rem; line-height: 1.6; }
.src {
  margin-top: auto; padding-top: 6px; border-top: 1px dotted rgba(0,0,0,.3);
  font-size: .7rem; line-height: 1.5; color: var(--muted); font-feature-settings: "palt"; /* 括弧と句点を詰めて行数を抑える */
}

/* ===== 絵の枠に入れる、作品ごとのラベル意匠（Canva の絵に差し替えるまで） ===== */
.face {
  --motif: none; --msize: auto; --mrep: no-repeat; --mpos: center; --fib: var(--fiber);
  position: relative; display: grid; place-items: center; height: 140px; overflow: hidden;
  background-color: var(--kinari); color: var(--sumi);
  background-image: var(--motif), var(--fib), var(--grain);
  background-size: var(--msize), 260px 260px, 180px 180px;
  background-repeat: var(--mrep), repeat, repeat;
  background-position: var(--mpos), 0 0, 0 0;
  border: 1px solid rgba(0,0,0,.55); box-shadow: 0 2px 0 rgba(0,0,0,.06);
}
.face > * { grid-area: 1 / 1; }
.waku::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--rule, var(--kin)); pointer-events: none; }
.name { position: relative; z-index: 1; font-family: var(--fude); font-weight: 400; line-height: 1.15; letter-spacing: .04em; text-align: center; }
.v { writing-mode: vertical-rl; }
.v > span { display: block; }
.sub-m { font-family: var(--mincho); font-weight: 600; }

/* 清酒無双：紺地に交差した2本の櫂・金箔の名前 */
.k-musou .face {
  background-color: var(--navy); --fib: var(--fiber-l); border-color: #000; --rule: rgba(201,167,90,.6); --kado-in: 10px;
  --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><g fill='%23C9A75A' stroke='%23C9A75A' stroke-linecap='round' opacity='.4'><line x1='22' y1='14' x2='120' y2='126' stroke-width='3.5'/><line x1='128' y1='14' x2='30' y2='126' stroke-width='3.5'/><rect x='104' y='121' width='32' height='10' rx='1.5' stroke='none' transform='rotate(-41 120 126)'/><rect x='14' y='121' width='32' height='10' rx='1.5' stroke='none' transform='rotate(41 30 126)'/></g></svg>");
  --msize: auto 100%;
}
.k-musou .name { font-size: 1.85rem; letter-spacing: .1em; color: #E6CF8E; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }

/* 米→酒：左に温度計の目盛り・名前は横書きの2段（大きな「米→酒」＋紺の帯） */
.k-ondo .face {
  --rule: rgba(16,22,91,.5);
  --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='140'><path d='M19 18h9M19 26h5M19 34h9M19 42h5M19 50h9M19 58h5M19 66h9M19 74h5M19 82h9M19 90h5M19 98h9M19 106h5M19 114h9' stroke='%23232220' stroke-width='1'/><rect x='9' y='14' width='7' height='104' rx='3.5' fill='%23fff' stroke='%23232220' stroke-width='.9'/><rect x='11' y='58' width='3' height='64' fill='%23C1392C'/><circle cx='12.5' cy='123' r='7' fill='%23C1392C' stroke='%23232220' stroke-width='.9'/></svg>");
  --msize: 40px 140px; --mpos: 6px 0;
}
.k-ondo .name { margin-left: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.k-ondo .main { font-size: 1.9rem; line-height: 1; }
.k-ondo .band { background: var(--navy); color: var(--kinari); font-size: .85rem; line-height: 1.5; letter-spacing: 0; padding: 2px 5px; }

/* 杜氏麻雀：雀卓の緑に牌の地紋・名前は1枚の牌（紅と藍の字） */
.k-mahjong .face { background-color: var(--felt); --fib: var(--fiber-l); border-color: #000; --motif: var(--tilegrid); --msize: 24px 32px; --mrep: repeat; --mpos: 0 0; }
.pai {
  background: #FBF7EC; border-radius: 8px; padding: 18px 10px; line-height: 1.05; letter-spacing: .08em;
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 5px 0 var(--navy), 0 5px 0 1px rgba(0,0,0,.35), 0 9px 8px rgba(0,0,0,.25);
}
.pai .r { color: var(--red); } .pai .n { color: var(--navy); }
.k-mahjong .pai { font-size: 1.6rem; margin-top: -4px; }

/* 杜氏ソリティア：藍染の鹿の子に、札が段々に重なる */
.k-soli .face { background-color: var(--ai); --fib: var(--fiber-l); border-color: #000; --motif: radial-gradient(circle, rgba(255,255,255,.14) 1.2px, transparent 1.9px); --msize: 9px 9px; --mrep: repeat; --mpos: 0 0; }
.k-soli .name {
  margin-top: 22px; min-width: 104px; padding: 12px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #FBF7EC; color: var(--sumi); border: 1px solid #1b1b1b; border-radius: 5px;
  box-shadow: 0 -11px 0 -1px #EFE5CC, 0 -11px 0 0 #1b1b1b, 0 -22px 0 -1px #E2D5B5, 0 -22px 0 0 #1b1b1b, 0 4px 6px rgba(0,0,0,.3);
}
.k-soli .main { font-size: 1.75rem; line-height: 1.1; color: var(--ai); }
.k-soli .sub { font-size: 1.05rem; letter-spacing: .02em; }

/* 醸造百選の陣取り：県の六角の地図の地紋（ところどころ朱と紺に塗られている）＋題簽 */
.k-jintori .face {
  --motif:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><defs><path id='h' d='M0-10 8.66-5V5L0 10-8.66 5V-5Z'/></defs><g fill='%23C1392C' fill-opacity='.55'><use href='%23h' x='112.58' y='15'/><use href='%23h' x='129.9' y='15'/><use href='%23h' x='121.24' y='30'/></g><g fill='%2310165B' fill-opacity='.5'><use href='%23h' x='17.32' y='120'/><use href='%23h' x='34.64' y='120'/><use href='%23h' x='8.66' y='135'/><use href='%23h' x='25.98' y='135'/></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='17.32' height='30' viewBox='0 0 17.32 30'><path d='M8.66 5 17.32 10V20L8.66 25 0 20V10ZM8.66 0V5M8.66 25V30' fill='none' stroke='%2310165B' stroke-opacity='.22' stroke-width='.8'/></svg>");
  --msize: 150px 150px, 17.32px 30px; --mrep: no-repeat, repeat; --mpos: 0 0, 0 0;
}
.k-jintori .name { padding: 8px 7px; background: var(--kinari); border: 1px solid rgba(16,22,91,.55); box-shadow: inset 0 0 0 2px var(--kinari), inset 0 0 0 3px rgba(193,57,44,.5); }
.k-jintori .sub { font-size: .95rem; letter-spacing: .02em; }
.k-jintori .main { font-size: 1.75rem; line-height: 1.05; padding-top: 6px; }

/* カモコロ：サイコロの面（四隅の目）・真ん中に名前 */
.k-koro .face {
  width: 132px; height: 132px; margin: 4px auto; justify-self: center; border-radius: 18px;
  background-color: #FFFDF8; border-color: rgba(0,0,0,.45);
  box-shadow: inset -3px -4px 0 rgba(0,0,0,.07), 0 2px 0 rgba(0,0,0,.1);
  --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='132'><g fill='%2310165B'><circle cx='30' cy='30' r='9'/><circle cx='102' cy='30' r='9'/><circle cx='30' cy='102' r='9'/><circle cx='102' cy='102' r='9'/></g></svg>");
  --msize: 100% 100%;
}
.k-koro .name { font-size: 1.55rem; color: var(--red); letter-spacing: .02em; }

/* キョーカン：言葉の吹き出しが重なる */
.k-kyokan .face {
  background-color: var(--torinoko); --rule: rgba(35,34,32,.35);
  --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='140'><g fill='none' stroke-width='1.5' stroke-opacity='.6' stroke-linejoin='round'><g stroke='%23C1392C'><ellipse cx='42' cy='28' rx='30' ry='17'/><path d='M54 43 64 54 46 44'/></g><g stroke='%2310165B'><ellipse cx='108' cy='112' rx='30' ry='17'/><path d='M96 97 86 86 104 96'/></g></g></svg>");
  --msize: auto 100%;
}
.k-kyokan .name { padding: 13px 14px; font-size: 1.3rem; letter-spacing: .02em; background: var(--kinari); border: 1.5px solid var(--sumi); border-radius: 50%; }
.k-kyokan .name::after { content: ""; position: absolute; left: 30%; bottom: -7px; width: 12px; height: 12px; background: var(--kinari); border-right: 1.5px solid var(--sumi); border-bottom: 1.5px solid var(--sumi); transform: rotate(45deg); }

/* 酒器おとし：盃の形の丸ラベル（蛇の目の紺の輪） */
.k-drop .face {
  width: 84%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%;
  background-color: #FFFDF8; border-color: rgba(0,0,0,.4);
  --motif: radial-gradient(circle closest-side, transparent 0 75.5%, var(--navy) 76% 87%, transparent 87.5%);
  --msize: 100% 100%;
}
.k-drop .name { color: var(--navy); }
.k-drop .main { font-size: 1.75rem; }
.k-drop .sub { font-size: 1.3rem; padding-top: 14px; }

/* かもしてぽん！：朱の地に3つ並んだ粒・横書き2段 */
.k-pon .face {
  background-color: var(--red); --fib: var(--fiber-l); border-color: #7a1f16; --rule: rgba(255,255,255,.55);
  --motif:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='24'><g stroke='%237A1F16' stroke-width='.8'><ellipse cx='11' cy='12' rx='6' ry='9' fill='%23fff' transform='rotate(-14 11 12)'/><ellipse cx='33' cy='12' rx='6' ry='9' fill='%23FBF6E9'/><ellipse cx='55' cy='12' rx='6' ry='9' fill='%23E9D396' transform='rotate(14 55 12)'/></g></svg>"),
    radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.6px);
  --msize: 66px 24px, 10px 10px; --mpos: 50% 16px, 0 0; --mrep: no-repeat, repeat;
}
.k-pon .name { margin-top: 26px; font-size: 1.5rem; line-height: 1.2; color: #fff; }
.k-pon .name > span { display: block; }

/* ラップ4本：太い帯の派手なラベル（大きな一語＋斜めの帯「ラップバトル」・金の縁） */
.k-rap .face {
  background-color: var(--g); --fib: var(--fiber-l); border-color: #000; --rule: rgba(201,167,90,.55);
  --motif: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 8px);
  --mrep: repeat;
}
.k-rap .name { justify-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.k-rap .w { font-size: 2.3rem; line-height: 1; letter-spacing: .06em; color: var(--w); }
.k-rap .band {
  align-self: stretch; margin: 0 -16px; padding: 4px 0 5px;
  background: var(--b); color: var(--bt);
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .14em;
  box-shadow: 0 -3px 0 var(--kin), 0 3px 0 var(--kin), 0 7px 0 rgba(0,0,0,.25);
  transform: rotate(-5deg);
}
.r-jozo   { --g: #232220; --b: var(--red); --bt: #fff;    --w: #E6CF8E; }
.r-wine   { --g: #5A1A2B; --b: #E7A3AE; --bt: #4A1322; --w: #F4CFD5; }
.r-shochu { --g: #8A5A3B; --b: #233A6B; --bt: #FBF6E9; --w: #FBF6E9; }
.r-chomi  { --g: #3A2016; --b: #006E54; --bt: #fff;    --w: #E6CF8E; }
.r-chomi .face { --motif: conic-gradient(rgba(255,255,255,.07) 25%, transparent 0 50%, rgba(255,255,255,.07) 0 75%, transparent 0); --msize: 14px 14px; } /* 城下町の市松 */

/* 醸造百選 ビューア：藍の表紙の和綴じ本（右に四つ目綴じ・左上に題簽）。絵の枠いっぱいに */
.k-book .face {
  position: absolute; inset: 0; height: auto; border: 0; box-shadow: none;
  background-color: #26386A; --fib: var(--fiber-l); place-items: start;
  --motif:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='140' viewBox='0 0 22 140' preserveAspectRatio='none'><path d='M7 0V140' stroke='%23000' stroke-opacity='.3'/><path d='M8 22V118M8 22H22M8 54H22M8 86H22M8 118H22' stroke='%23F3EAD3' stroke-width='1.6' fill='none'/><g fill='%230b1238'><circle cx='8' cy='22' r='1.8'/><circle cx='8' cy='54' r='1.8'/><circle cx='8' cy='86' r='1.8'/><circle cx='8' cy='118' r='1.8'/></g></svg>"),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  --msize: 22px 100%, auto; --mpos: 100% 0, 0 0; --mrep: no-repeat, repeat;
}
.k-book .name {
  margin: 12px 0 0 14px; padding: 10px 6px;
  background-color: var(--kinari); background-image: var(--fiber);
  border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 0 0 3px var(--kinari), inset 0 0 0 4px rgba(193,57,44,.6), 1px 2px 0 rgba(0,0,0,.25);
}
.k-book .main { font-size: 1.35rem; }
.k-book .sub { font-size: .9rem; color: var(--muted); padding-top: 18px; }

/* 酒米の系図：上が欠けた木札（木目）・頭に赤と紺の┬。頁の左に掛けた札 */
.k-keizu .face {
  width: 72px; min-height: 124px; margin: 8px auto; justify-self: center;
  clip-path: polygon(18% 0, 82% 0, 100% 12%, 100% 100%, 0 100%, 0 12%);
  background-color: #DDBB86; place-items: end center;
  --motif:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='14'><path d='M5 4H25M15 4V13' stroke='%23232220' stroke-width='1.2' fill='none'/><circle cx='5' cy='4' r='3.4' fill='%23C1392C'/><circle cx='25' cy='4' r='3.4' fill='%2310165B'/></svg>"),
    repeating-linear-gradient(90deg, rgba(110,70,30,.12) 0 1px, transparent 1px 6px, rgba(110,70,30,.07) 6px 7px, transparent 7px 13px);
  --msize: 30px 14px, auto; --mpos: 50% 7px, 0 0; --mrep: no-repeat, repeat;
}
.k-keizu .name { margin-bottom: 8px; font-size: 1.2rem; letter-spacing: 0; color: #3a2414; }

/* 全国新酒鑑評会の札（k-kanpyo）は載せない間は外した。戻すときは design/b2.html から写す */

/* 酒縁結び：七宝つなぎの地紋に水引の結び（名前は右寄せで水引と重ねない） */
.k-en .face {
  --rule: rgba(193,57,44,.45);
  --motif:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='46'><g fill='none' stroke-linecap='round'><g stroke='%23C1392C' stroke-width='4'><circle cx='20' cy='22' r='9'/><circle cx='36' cy='22' r='9'/><circle cx='28' cy='12' r='7.5'/><path d='M21 31 10 43M35 31 46 43'/></g><g stroke='%23FBF6E9' stroke-width='1.1'><circle cx='20' cy='22' r='9'/><circle cx='36' cy='22' r='9'/><circle cx='28' cy='12' r='7.5'/><path d='M21 31 10 43M35 31 46 43'/></g></g></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><g fill='none' stroke='%23C1392C' stroke-opacity='.16'><circle cx='10' cy='10' r='10'/><circle cx='0' cy='0' r='10'/><circle cx='20' cy='0' r='10'/><circle cx='0' cy='20' r='10'/><circle cx='20' cy='20' r='10'/></g></svg>");
  --msize: 56px 46px, 20px 20px; --mpos: 6px calc(100% - 6px), 0 0; --mrep: no-repeat, repeat;
}
.k-en .name { justify-self: end; margin-right: 10px; font-size: 1.3rem; color: var(--navy); padding: 6px 3px; background: var(--kinari); box-shadow: 0 0 0 5px var(--kinari); }

/* 紹介と共有 */
.about p { margin: 0 0 16px; }
.share { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.share-ttl { font-weight: 700; margin: 0 0 10px; }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.copied { min-height: 1.5em; font-size: .85rem; color: var(--muted); margin: 8px 0 0; }

/* フッター */
.site-foot { background: var(--navy); color: #fff; text-align: center; padding: 24px 16px 32px; }
.site-foot p { margin: 0 0 8px; font-size: .88rem; }
.site-foot a { color: #fff; display: inline-block; padding: 12px 8px; } /* 指で押せる高さに */
.legal { font-weight: 700; }