/* 一色のオレンジに白い線画。スマホ幅の 1 列（PC では最大 430px を中央に） */
:root{
  --bg:#fc4500;        /* 店のオレンジ（レイアウト例の背景） */
  --ink:#ffffff;       /* 線画・文字 */
  --card:#ffffff;      /* お知らせカード */
  --text:#2a0f00;      /* カード内の文字 */
  --label:#00a6fc;     /* NEWS の文字 */
  --line:1.3px;        /* 線の太さ（拡大しても固定） */
  --col:430px;         /* 列の最大幅 */
  --display:"Antonio","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--body);font-size:14px;line-height:1.5;overflow-x:hidden;-webkit-text-size-adjust:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.src{position:absolute;width:0;height:0;visibility:hidden}

.stage{--k:1.343px;position:relative;width:min(100%,var(--col));margin-inline:auto;overflow-x:clip}

/* 線と塗り（素材の .cls-* を読み込み時にこの 2 つへ置き換える） */
.ln{fill:none;stroke:var(--ink);stroke-width:var(--line);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fl{fill:var(--ink)}
#newsTxt .fl{fill:var(--label)}
.hit{fill:transparent}

/* ヘッダー：大きいロゴが縮んでバーに収まる */
.hdr{position:fixed;inset:0 0 auto 0;z-index:30;pointer-events:none;padding-top:env(safe-area-inset-top,0px)}
.hdr-bg{position:absolute;inset:0 0 auto 0;height:calc(56px + env(safe-area-inset-top,0px));background:var(--bg);opacity:0}
.hdr-in{position:relative;width:min(100%,var(--col));margin-inline:auto}
.logo{display:block;transform-origin:50% 0;pointer-events:auto}
.logo img{display:block;width:100%;height:auto}
.logo:focus-visible,.sec a:focus-visible,#news a:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
.hero-space{height:calc(var(--k) * var(--hero, 118))}

/* ベロ（ページ座標の px で描く） */
#tongue{position:absolute;left:0;top:0;z-index:5;pointer-events:none;overflow:visible}
#tFill{fill:var(--bg)}
#tLine{fill:none;stroke:var(--ink);stroke-width:var(--line);stroke-linecap:round;stroke-linejoin:round}

.sec svg{display:block;width:100%;height:auto;overflow:visible}
#s-dog{padding-bottom:6vh;padding-bottom:6svh}
#s-usagi{padding-block:6vh 3vh;padding-block:6svh 3svh}
#s-neko{padding-block:3vh 6vh;padding-block:3svh 6svh}
#s-news{padding-block:4vh;padding-block:4svh}

/* 店の概要：右端をベロが通るので、その手前で折り返す */
#s-about{padding:0 var(--about-right,96px) 0 16px}
.about{margin:0;font-size:clamp(12px, calc(var(--k) * 9.4), 14px);font-weight:500;line-height:2.2;letter-spacing:.04em;text-align:center;word-break:auto-phrase}
.kao{white-space:nowrap}

/* 読み込み前は動く部品を隠しておく */
.pair{opacity:0}
.ball,.dot{visibility:hidden}

/* お知らせ（四つ足の猫の体の中） */
.newsbox{position:relative}
#news{position:absolute;left:var(--news-l);top:var(--news-t);width:var(--news-w);margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
#news li{opacity:0}
#news li > *{display:block;background:var(--card);color:var(--text);text-decoration:none;padding:9px 12px 11px;clip-path:polygon(0 5%,100% 0,97.5% 100%,1.5% 95%)}
#news li:nth-child(even) > *{clip-path:polygon(1.5% 0,99% 4%,100% 96%,0 100%)}
#news a strong::after{content:" →";font-weight:700}
#news time{display:block;font-family:var(--display);font-size:13px;letter-spacing:.08em;line-height:1.3;font-variant-numeric:tabular-nums}
#news strong{display:block;font-size:14px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}

footer{min-height:26vh;min-height:26svh;display:flex;align-items:flex-end;justify-content:center;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px))}
footer p{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-align:center}
.nose-cap .ln{fill:var(--bg)}

/* PC 表示（js/config.js の WIDE.minWidth 以上）：動きを列の外まで描く */
.wide .stage{overflow-x:visible}
.bounce{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;overflow:visible}
.wide footer{min-height:10vh;min-height:10svh}   /* 拡大した四つ足の猫が最後まで 1 画面に収まるように */
.blink{transform-box:fill-box;transform-origin:center}   /* まばたき：目の中心で縦につぶす */
/* ベロの押せる範囲（見えない太い線）。押すと引っ込む */
#tHit{fill:transparent;stroke:transparent;pointer-events:all;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ears-hit{pointer-events:all;touch-action:manipulation;-webkit-tap-highlight-color:transparent}   /* うさぎ：タップで耳が伸びる（隠し要素なのでカーソルは変えない） */
.ball-hit{fill:transparent;pointer-events:all;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}   /* 跳ねるぼんぼり：タップで跳ね返る */
.kao-eyes > span{display:inline-block;transform-origin:50% 42%}   /* 顔文字の目：まばたきで縦につぶす */
.logo{position:relative}
.logo-zone{position:absolute;top:0;height:100%}   /* ロゴの U を押す範囲（見えない） */
.head-hit{pointer-events:all;touch-action:manipulation;-webkit-tap-highlight-color:transparent}   /* 四つ足の猫の顔：タップで背景色が変わる（隠し要素） */