/* 案2「神社と縁起物」の食べ物の特集（wa2-food・2026-10-02）。章の HTML は jj-wa/food.php、飾りと動きは wa2-food.js
   ★このファイルは「並び」だけ（2026-10-02 遅い回線の直し）。main.css と一緒に先に読む（描画を待たせる）
     章の並び・食券機の箱とボタン・暖簾の静かな絵（::before）・取り出し口の静かな絵。JS が無くてもこれだけで崩れない
     JS が足す飾りの見た目と動きは wa2-food-deco.css（ページの読み込みが終わってから読む・jj-wa.php の jj-wa-boot）
   全部 body.jjw2 .wa-food の下。クラスは wa-food で始まる名前だけ（main.css の mg- の値は変えない・上書きしない）
   足した色は朱 #e2401c と金 #c9a23a だけ（ほかはサイトの白・黒・赤・生成り・灰）。影なし・角丸なし */
/* ── 動かない絵（data URI）。暖簾の3枚と竿は、JS の飾りと JS が無いときの絵で同じものを使う ── */
body.jjw2 .wa-food{--wf-n1:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 66'><path fill='%23e2401c' stroke='%23131313' stroke-width='2.2' d='M1.1 1.1h43.8v63.8H1.1z'/><path fill='%23d10a11' stroke='%23131313' stroke-width='1.4' d='M1.8 1.8h42.4v8.6H1.8z'/><path stroke='%23fdfdf6' stroke-width='1.2' d='M6 57.5h34'/><text x='23' y='44' fill='%23fdfdf6' font-family='Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,Noto Serif CJK JP,serif' font-weight='600' font-size='26' text-anchor='middle'>食</text></svg>");
  --wf-n2:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 66'><path fill='%23e2401c' stroke='%23131313' stroke-width='2.2' d='M1.1 1.1h43.8v63.8H1.1z'/><path fill='%23d10a11' stroke='%23131313' stroke-width='1.4' d='M1.8 1.8h42.4v8.6H1.8z'/><path stroke='%23fdfdf6' stroke-width='1.2' d='M6 57.5h34'/><text x='23' y='44' fill='%23fdfdf6' font-family='Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,Noto Serif CJK JP,serif' font-weight='600' font-size='26' text-anchor='middle'>事</text></svg>");
  --wf-n3:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 66'><path fill='%23e2401c' stroke='%23131313' stroke-width='2.2' d='M1.1 1.1h43.8v63.8H1.1z'/><path fill='%23d10a11' stroke='%23131313' stroke-width='1.4' d='M1.8 1.8h42.4v8.6H1.8z'/><path stroke='%23fdfdf6' stroke-width='1.2' d='M6 57.5h34'/><text x='23' y='44' fill='%23fdfdf6' font-family='Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,Noto Serif CJK JP,serif' font-weight='600' font-size='26' text-anchor='middle'>処</text></svg>");
  --wf-rod:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 12'><path stroke='%23131313' stroke-width='4' stroke-linecap='round' d='M6 6h144'/><g fill='%23c9a23a' stroke='%23131313' stroke-width='1.4'><circle cx='5.5' cy='6' r='4.5'/><circle cx='150.5' cy='6' r='4.5'/></g></svg>");
  position:relative}
/* ── 並び（PC：左に注目の1本と正方形3枚・右に食券機／タブレットとスマホ：縦に積む） ── */
body.jjw2 .wa-food .wa-food__hd{position:relative;padding-top:96px;margin-bottom:32px;text-align:center}
/* 押せる範囲を 44px 以上に（字の位置は変えない。韓国語・中国語の2字の札と題でも幅 44px に届く値） */
body.jjw2 .wa-food .wa-food__lbl a{padding:16px 12px}
body.jjw2 .wa-food .wa-food__tile h3 a{padding-inline:8px;margin-inline:-8px}
body.jjw2 .wa-food .wa-food__dek{max-width:620px;margin:0 auto;font:400 15px/22px var(--sans);color:#666}
html:is([lang^=zh],[lang^=ja],[lang^=ko]) body.jjw2 .wa-food .wa-food__dek{line-height:1.6}
body.jjw2 .wa-food .wa-food__grid{display:grid;gap:48px}
body.jjw2 .wa-food .wa-food__main{min-width:0}
body.jjw2 .wa-food .wa-food__lead{position:relative}
/* 注目の1本の写真：スマホは画面の幅いっぱい（16:9 のまま）・タブレット 688×387・PC 836×470 */
body.jjw2 .wa-food .wa-food__ph{margin:0 calc(var(--mg-pad,24px) * -1)}
body.jjw2 .wa-food .wa-food__ltx{display:grid;gap:8px;justify-items:start;margin-top:12px}
body.jjw2 .wa-food .wa-food__ldek{max-width:640px}
body.jjw2 .wa-food :is(.wa-food__dek,.wa-food__ldek,.wa-food__tixp){text-wrap:pretty}
/* 日本語は文節で折る（ウイ／スキーのように語の途中で折らない） */
html[lang=ja] body.jjw2 .wa-food :is(.wa-food__dek,.wa-food__ldek,.wa-food__tkn,.wa-food__tixp){word-break:auto-phrase}
/* 正方形の3枚（PC 264・タブレット 220・スマホ 163） */
body.jjw2 .wa-food .wa-food__tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
body.jjw2 .wa-food .wa-food__lead+.wa-food__tiles{margin-top:32px}
body.jjw2 .wa-food .wa-food__tile{position:relative;display:grid;gap:8px;align-content:start;justify-items:start}
body.jjw2 .wa-food .wa-food__tph{justify-self:stretch}
body.jjw2 .wa-food .wa-food__all{margin-top:12px}
body.jjw2 .wa-food :is(.wa-food__all,.wa-food__tixa) a{display:inline-block;padding:14px 0;font:500 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#000}
html:is([lang^=zh],[lang^=ja],[lang^=ko]) body.jjw2 .wa-food :is(.wa-food__all,.wa-food__tixa) a{letter-spacing:.06em}
/* スマホは2列。3枚目（奇数の最後）は1枚で余るので横長に置く（写真は左の列と同じ幅・字は右の列） */
@media(max-width:767px){
  body.jjw2 .wa-food .wa-food__tile:nth-child(odd):last-child{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:16px;row-gap:8px}
  body.jjw2 .wa-food .wa-food__tile:nth-child(odd):last-child>.wa-food__tph{grid-row:1/-1;grid-column:1}
  body.jjw2 .wa-food .wa-food__tile:nth-child(odd):last-child>h3{grid-row:2;grid-column:2}
  body.jjw2 .wa-food .wa-food__tile:nth-child(odd):last-child>a:not(.wa-food__tph){grid-row:3;grid-column:2}
}
@media(min-width:768px){
  body.jjw2 .wa-food .wa-food__ph{margin:0}
  body.jjw2 .wa-food .wa-food__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1024px){
  body.jjw2 .wa-food .wa-food__grid{grid-template-columns:minmax(0,836fr) minmax(0,444fr);gap:32px;align-items:start}
  body.jjw2 .wa-food .wa-food__grid:not(:has(>.wa-food__tix)){grid-template-columns:minmax(0,1fr)}
  body.jjw2 .wa-food .wa-food__tiles{column-gap:22px}
}
/* PC の食券機は伸ばさず上にそろえる（全体が1画面に入る高さのまま。上のボタンに触っても取り出し口が見える） */
@media(min-width:1200px){
  body.jjw2 .wa-food .wa-food__tixl .wa-food__tk{--wf-ic:34px}
}
/* ── 食券機（見せ場）。上に赤い札「食券」・ボタン8つ・下に取り出し口。ボタンに触ると灯って食券が出る ── */
body.jjw2 .wa-food .wa-food__tix{--wf-sign:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'><g fill='%23c9a23a' stroke='%23131313' stroke-width='1.2'><circle cx='7' cy='15' r='3.4'/><circle cx='113' cy='15' r='3.4'/></g><g fill='%23fdfdf6' font-family='Hiragino Mincho ProN,Yu Mincho,Noto Serif JP,Noto Serif CJK JP,serif' font-weight='600' font-size='23' text-anchor='middle'><text x='46' y='23.5'>食</text><text x='74' y='23.5'>券</text></g></svg>");
  --wf-out:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 196 106'><path fill='%23fff' stroke='%23131313' stroke-width='2' d='M1 1h194v104H1z'/><path fill='%23f3f1ea' stroke='%23d6d6d6' d='M14.5 24.5h167v73h-167z'/><path fill='%23131313' d='M28 9h140v9H28z'/><circle cx='183' cy='13.5' r='4.5' fill='%23e9e9e9' stroke='%23131313' stroke-width='1.2'/></svg>");
  position:relative;padding:62px 18px 14px;background:#fdfdf6;border:2px solid #131313}
body.jjw2 .wa-food .wa-food__tix::before{content:"";position:absolute;left:0;right:0;top:0;height:42px;border-bottom:2px solid #131313;background:#d10a11 var(--wf-sign) no-repeat center/120px 30px}
body.jjw2 .wa-food .wa-food__tixh{margin:0}
body.jjw2 .wa-food .wa-food__tixp{margin-top:4px;font:400 13px/19px var(--sans);color:#666}
body.jjw2 .wa-food .wa-food__tixl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
body.jjw2 .wa-food .wa-food__tixl>li{display:grid}
/* ボタン：白い面に黒い枠・上に灯りの帯。字（品目名と判定）は動かさない。灯るのは帯と面（::before と ::after） */
body.jjw2 .wa-food .wa-food__tk{--wf-ic:28px;position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;gap:8px;min-height:72px;padding:16px 12px 10px;
  background:#fff linear-gradient(#e9e9e9,#e9e9e9) no-repeat 10px 6px/calc(100% - 28px - var(--wf-ic)) 4px;border:2px solid #131313;color:#000;text-decoration:none;-webkit-tap-highlight-color:transparent}
body.jjw2 .wa-food .wa-food__tk::before{content:"";position:absolute;left:10px;right:calc(var(--wf-ic) + 18px);top:6px;height:4px;background:#c9a23a;opacity:0;transition:opacity .2s}
body.jjw2 .wa-food .wa-food__tk::after{content:"";position:absolute;inset:0;z-index:-1;background:#fbf2d9;opacity:0;transition:opacity .2s}
body.jjw2 .wa-food .wa-food__tkn{font:500 14px/18px var(--sans)}
html:is([lang^=zh],[lang^=ja],[lang^=ko]) body.jjw2 .wa-food .wa-food__tkn{line-height:1.4}
html[lang^=ko] body.jjw2 .wa-food .wa-food__tkn{word-break:keep-all;overflow-wrap:anywhere}
/* 品目の絵はボタンの右上。名前の1行目だけが絵をよける（CSS の float で最初から場所を空けておくので、JS が絵を入れても高さは変わらない） */
body.jjw2 .wa-food .wa-food__tkn::before{content:"";float:right;width:calc(var(--wf-ic) + 2px);height:calc(var(--wf-ic) - 10px)}
body.jjw2 .wa-food .wa-food__tkv{justify-self:start;align-self:end;padding:3px 6px 2px;white-space:nowrap;border:1px solid currentColor;font:500 11px/13px var(--sans);letter-spacing:.08em;text-transform:uppercase}
html:is([lang^=zh],[lang^=ja],[lang^=ko]) body.jjw2 .wa-food .wa-food__tkv{letter-spacing:.02em}
body.jjw2 .wa-food .wa-food__tk--if .wa-food__tkv{color:#d10a11}
body.jjw2 .wa-food .wa-food__tk--no .wa-food__tkv{background:#131313;border-color:#131313;color:#fff}
body.jjw2 .wa-food .wa-food__tix .wa-food__tk:is(:hover,:focus-visible,.wa-food-lit)::before{opacity:1;animation:none}
body.jjw2 .wa-food .wa-food__tix .wa-food__tk:is(:hover,:focus-visible,.wa-food-lit)::after{opacity:1}
body.jjw2 .wa-food .wa-food__tk:focus-visible{outline:2px solid #d10a11;outline-offset:2px}
/* 取り出し口（静かな絵は CSS。食券は JS が同じ場所に重ねる）。リンクの上の余白に置く */
body.jjw2 .wa-food .wa-food__tixa{position:relative;margin-top:140px;text-align:center}
body.jjw2 .wa-food .wa-food__tixa::before{content:"";position:absolute;left:calc(50% - 98px);bottom:calc(100% + 16px);width:196px;height:106px}
body.jjw2 .wa-food .wa-food__tixa::before{background:var(--wf-out) no-repeat center/100% 100%}
/* ボタンの並び：PC とスマホは2列（PC の狭い面は字を13px に）・小さいスマホ（360px 未満）は1列・タブレットは4列。どれも名前の下に判定・右上に品目の絵 */
@media(max-width:359px){
  body.jjw2 .wa-food .wa-food__tixl{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:1024px) and (max-width:1199px){
  body.jjw2 .wa-food .wa-food__tkn{font-size:13px;line-height:17px}
  body.jjw2 .wa-food .wa-food__tk{padding:15px 10px 9px}
  body.jjw2 .wa-food .wa-food__tkv{letter-spacing:.03em}
}
@media(min-width:768px) and (max-width:1023px){
  body.jjw2 .wa-food .wa-food__tixl{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* ── 章の頭：「食事処」の暖簾（見えているあいだ風にそよぐ・触るとめくれる） ── */
body.jjw2 .wa-food .wa-food__hd::before{top:6px;left:calc(50% - 78px);width:156px;height:74px}
body.jjw2 .wa-food .wa-food__hd::before{content:"";position:absolute;background:var(--wf-rod) no-repeat 0 0/156px 12px,var(--wf-n1) no-repeat 5px 5px/46px 66px,var(--wf-n2) no-repeat 55px 5px/46px 66px,var(--wf-n3) no-repeat 105px 5px/46px 66px}
@media(max-width:767px){
  body.jjw2 .wa-food .wa-food__hd{padding-top:84px;margin-bottom:28px}
  body.jjw2 .wa-food .wa-food__hd::before{transform:scale(.84);transform-origin:50% 0}
}
/* ── 動きを減らす設定：一切動かさない（食券は動かさずに出す） ── */
@media(prefers-reduced-motion:reduce){
  body.jjw2 .wa-food .wa-food__tk::before,body.jjw2 .wa-food .wa-food__tk::after{animation:none!important;transition:none!important}
}