/* リノ猫の案内（/assets/v2/neko-chat.js）。右下の呼び出しボタンと、吹き出しの形の小さな窓。
   見た目はサイトと同じ吹き出し（白地・墨の線・ミントと橙・Dela Gothic One）。lab.css の変数を使う（無い頁でも崩れないよう控えの色つき）。
   ★ 頁の中に style を書かない（CSP）。位置の数（窓の高さの上限）は neko-chat.js が CSSOM で --nc-max に入れる。
   ★ 重なりの順：リノ猫ののぞき（40・60・61）より上、スマホのメニュー（80・81）と写真の拡大（100）より下。 */

.nc{--nc-ink:var(--ink,#0f1116);--nc-mint:var(--mint,#9fe1cb);--nc-mint-soft:var(--mint-soft,#e3f6ef);
  --nc-orange:var(--orange,#ffbe7a);--nc-line:var(--line,2.5px);--nc-max:520px;
  position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:70;
  font:500 15px/1.7 var(--body,"Zen Kaku Gothic New",sans-serif);color:var(--nc-ink);letter-spacing:.02em;}
.nc *{box-sizing:border-box;}

/* ── 呼び出しボタン：ミントの丸の下の縁から、リノ猫が顔を出している ── */
.nc-btn{position:relative;display:block;width:64px;height:64px;margin:0 0 0 auto;padding:0;border-radius:50%;
  border:var(--nc-line) solid var(--nc-ink);background:var(--nc-mint);cursor:pointer;overflow:hidden;
  box-shadow:0 5px 0 -1px var(--nc-ink);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
  -webkit-tap-highlight-color:transparent;}
.nc-btn img{position:absolute;left:50%;top:12px;width:56px;height:auto;max-width:none;transform:translateX(-50%);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
.nc-btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 -1px var(--nc-ink);}
.nc-btn:hover img{transform:translate(-50%,-4px);}
.nc-btn:active{transform:translateY(3px);box-shadow:0 2px 0 -1px var(--nc-ink);}
.nc-btn:focus-visible{outline:3px solid var(--nc-ink);outline-offset:4px;}
.nc-btn[aria-expanded="true"]{background:var(--nc-orange);}
/* 「聞いてニャ」の札（広い画面だけ・閉じているときだけ）。合わせたとき（.nc-btn のすぐ後ろに置いてある）と、最初の1回（.hi）だけ出す */
.nc-tag{display:none;position:absolute;right:74px;bottom:14px;white-space:nowrap;pointer-events:none;
  font:700 13px/1 var(--body,sans-serif);background:#fff;border:2px solid var(--nc-ink);border-radius:14px;padding:8px 12px;
  box-shadow:0 6px 14px -6px rgba(15,17,22,.35);}
.nc-tag::after{content:"";position:absolute;right:-7px;top:calc(50% - 5px);width:10px;height:10px;background:#fff;
  border:2px solid var(--nc-ink);border-top:0;border-left:0;transform:rotate(-45deg);}
.nc-btn:hover + .nc-tag,.nc-btn:focus-visible + .nc-tag,.nc.hi .nc-tag{display:block;}
.nc.open .nc-tag{display:none;}
@media (max-width:700px){ .nc-tag{display:none !important;} }

/* ── 窓：角の丸い吹き出し。しっぽは右下のボタン（リノ猫）のほうへ ── */
.nc-win{position:absolute;right:0;bottom:78px;width:min(380px,calc(100vw - 32px));max-height:var(--nc-max);
  display:flex;flex-direction:column;background:#fff;border:var(--nc-line) solid var(--nc-ink);border-radius:26px;
  box-shadow:0 18px 40px -14px rgba(15,17,22,.4),0 2px 6px rgba(15,17,22,.08);
  transform-origin:calc(100% - 30px) calc(100% + 14px);}
.nc-win[hidden]{display:none;}
.nc-win::after{content:"";position:absolute;right:24px;bottom:-9px;width:16px;height:16px;background:#fff;
  border:var(--nc-line) solid var(--nc-ink);border-top:0;border-left:0;transform:rotate(45deg);border-radius:0 0 4px 0;}
.nc.open .nc-win{animation:nc-pop .32s cubic-bezier(.34,1.56,.64,1);}
@keyframes nc-pop{from{opacity:0;transform:scale(.7) translateY(10px);}to{opacity:1;transform:none;}}
.nc.closing .nc-win{animation:nc-out .16s ease-in forwards;}
@keyframes nc-out{to{opacity:0;transform:scale(.85) translateY(8px);}}

.nc-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:2px solid var(--nc-ink);
  background:var(--nc-mint);border-radius:23px 23px 0 0;}
.nc-ttl{margin:0;flex:1;min-width:0;font:400 17px/1.3 var(--display,"Dela Gothic One",sans-serif);letter-spacing:.01em;}
.nc-ttl small{display:block;font:700 11.5px/1.4 var(--body,sans-serif);color:var(--ink-2,#3b4250);}
.nc-face{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid var(--nc-ink);background:#fff;overflow:hidden;position:relative;}
.nc-face img{position:absolute;left:50%;top:5px;width:36px;height:auto;max-width:none;transform:translateX(-50%);}
.nc-x{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--nc-ink);background:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0;color:var(--nc-ink);}
.nc-x svg{width:16px;height:16px;}
.nc-x:hover{background:var(--nc-orange);}
.nc-x:focus-visible{outline:3px solid var(--nc-ink);outline-offset:2px;}

/* 話の流れ。巻けるのはここだけ（窓の外の頁は巻かない） */
.nc-log{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;}
.nc-log:focus-visible{outline:3px solid var(--nc-ink);outline-offset:-4px;}
.nc-m{max-width:88%;padding:9px 13px;border:2px solid var(--nc-ink);border-radius:18px;overflow-wrap:anywhere;}
.nc-m p{margin:0;}
.nc-cat{align-self:flex-start;background:#fff;border-bottom-left-radius:6px;}
.nc-you{align-self:flex-end;background:var(--nc-orange-soft,var(--orange-soft,#fff0dd));border-bottom-right-radius:6px;}
.nc-who{font-size:11.5px;font-weight:700;color:var(--ink-2,#3b4250);display:block;margin-bottom:1px;}
/* 頁から写した答えの一文（よくある質問）。リノ猫の言葉ではないので、引用の形で小さく */
.nc-quote{margin:6px 0 0;padding:4px 0 4px 10px;border-left:3px solid var(--nc-mint);font-size:13.5px;color:var(--ink-2,#3b4250);}
.nc-go{list-style:none;margin:8px 0 2px;padding:0;display:grid;gap:6px;}
.nc-go a{display:flex;align-items:center;gap:8px;padding:7px 12px;border:2px solid var(--nc-ink);border-radius:12px;
  background:var(--nc-mint-soft);color:var(--nc-ink);text-decoration:none;font-weight:700;font-size:14px;line-height:1.45;}
.nc-go a:hover{background:var(--nc-mint);}
.nc-go a:focus-visible{outline:3px solid var(--nc-ink);outline-offset:2px;}
.nc-go svg{flex:none;width:15px;height:15px;margin-left:auto;}
.nc-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 0;padding:0;list-style:none;}
.nc-chips button{font:700 13.5px/1.3 var(--body,sans-serif);color:var(--nc-ink);background:#fff;border:2px solid var(--nc-ink);
  border-radius:999px;padding:7px 12px;cursor:pointer;min-height:36px;}
.nc-chips button:hover{background:var(--nc-mint);}
.nc-chips button:focus-visible{outline:3px solid var(--nc-ink);outline-offset:2px;}
.nc-more{align-self:flex-start;font:700 13px/1.3 var(--body,sans-serif);color:var(--mint-deep,#13775a);background:none;border:0;
  padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;}
.nc-more:focus-visible{outline:3px solid var(--nc-ink);outline-offset:2px;}

/* 打つ欄（送っても外へは出ない。この窓の中で引くだけ） */
.nc-form{display:flex;gap:8px;padding:10px 12px 8px;border-top:2px solid var(--nc-ink);}
.nc-in{flex:1;min-width:0;height:42px;font:500 16px/1 var(--body,sans-serif);color:var(--nc-ink);background:#fff;
  border:2px solid var(--nc-ink);border-radius:999px;padding:0 14px;}
.nc-in:focus-visible{outline:3px solid var(--nc-ink);outline-offset:1px;}
.nc-send{flex:none;height:42px;padding:0 16px;font:700 14.5px/1 var(--body,sans-serif);color:var(--nc-ink);background:var(--nc-orange);
  border:2px solid var(--nc-ink);border-radius:999px;cursor:pointer;}
.nc-send:hover{background:#ffcf98;}
.nc-send:focus-visible{outline:3px solid var(--nc-ink);outline-offset:2px;}
.nc-note{margin:0;padding:0 16px 10px;font-size:11.5px;line-height:1.5;color:var(--ink-2,#3b4250);}

/* 頁のいちばん下の行（規約のリンクなど）が、右下のボタンの下に隠れないよう、下の帯の最後に余白を足す */
html.has-nc .foot-bottom{padding-bottom:84px;}

@media (max-width:560px){
  .nc-win{bottom:74px;}
  .nc-btn{width:58px;height:58px;}
  .nc-btn img{width:50px;top:11px;}
}
@media (prefers-reduced-motion:reduce){
  .nc-btn,.nc-btn img{transition:none;}
  .nc.open .nc-win,.nc.closing .nc-win{animation:none;}
}