*{box-sizing:border-box;}
/* 効果の共通値。角・動きの速さ・浮きの影を1か所で持ち、要素ごとに別の値を書かない。
   速さは2段だけ ── 押したときの反応と退場は短く、登場と移動はそれより少し長く */
:root{
  --r-part:6px;
  --r-box:8px;
  --t-fast:120ms;
  --t-move:180ms;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --lift:0 12px 32px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);
  --hover:#f3f4f6;
  --press:#e5e7eb;
  /* 配色。役割ごとに1色ずつ持ち、ここに無い色を足さない。
     文字と線は灰の段で、操作と選択中だけを青にする。赤・緑・黄はそれぞれ失敗・完了・待ちにだけ使う */
  --text:#1f2937;
  --text-sub:#4b5563;
  --text-mute:#6b7280;
  --line:#e5e7eb;
  --line-strong:#d1d5db;
  --line-field:#6b7280;
  --ground:#f9fafb;
  --accent:#2563eb;
  --accent-hover:#1d4ed8;
  --accent-press:#1e40af;
  --accent-text:#1d4ed8;
  --accent-soft:#eff6ff;
  --danger:#b91c1c;
  --danger-line:#dc2626;
  --ok:#15803d;
  --wait-bg:#fffbeb;
  --wait-line:#fcd34d;
}
html,body{margin:0;padding:0;}
body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;font-size:14px;line-height:1.6;color:var(--text);background:#fff;}
a{color:var(--accent-text);}
a:visited{color:var(--accent-text);}
a:has(button){text-decoration:none;}
h1,h2,h3{margin:0;font-weight:700;}
h1{font-size:20px;}
h2{font-size:16px;}
h3{font-size:13px;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
button{--ink:var(--text);font:inherit;color:var(--text);background:#fff;border:1px solid #9ca3af;border-radius:var(--r-part);padding:6px 12px;cursor:pointer;transition:background-color var(--t-fast),transform var(--t-fast);}
button:where(:not(:disabled)):hover{background:var(--hover);}
button:where(:not(:disabled)):active{background:var(--press);transform:translateY(1px);}
button:disabled{opacity:.4;cursor:not-allowed;}
/* 確定の操作。1画面・1ダイアログに1つだけ塗る。ダイアログは「やめる」と並んだときの右側、
   お客の画面は大きいボタン、管理画面はページ内の1つへ .pri を付ける */
.pri,.big,.dlgft>button:last-child:not(:only-child),.dlgft>a:last-child:not(:only-child)>button{--ink:#fff;background:var(--accent);border-color:var(--accent);color:#fff;}
.pri:where(:not(:disabled)):hover,.big:where(:not(:disabled)):hover,.dlgft>button:last-child:not(:only-child):hover,.dlgft>a:last-child:not(:only-child)>button:hover{background:var(--accent-hover);}
.pri:where(:not(:disabled)):active,.big:where(:not(:disabled)):active,.dlgft>button:last-child:not(:only-child):active,.dlgft>a:last-child:not(:only-child)>button:active{background:var(--accent-press);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
input,select,textarea{font:inherit;color:var(--text);background:#fff;border:1px solid var(--line-field);border-radius:var(--r-part);padding:6px 8px;width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast);}
/* 入力欄はマウスで押したときも枠を出す。いまどこへ書いているかを示すため */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.25);}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none;}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent);}
textarea{line-height:1.7;}
.note{font-size:12px;color:var(--text-sub);}
/* 性質の違う情報を1行に並べるときは、区切り記号ではなく間隔で分ける。
   記号でつなぐと、日付・名前・星が同じ重さの1つの文字列に見える */
.meta{display:inline-flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;}
p.meta{display:flex;}
/* 表の行の操作。隣り合うリンクを押し間違えないよう、間隔と押せる高さを取る */
.ra{display:flex;flex-wrap:wrap;gap:4px 16px;white-space:nowrap;}
.ra a{padding:2px 0;}
/* 訂正された記録。消さずに残し、いまの状態を決めるのに使わないことを見た目で示す */
.nw{white-space:nowrap;}
.voided{color:var(--text-mute);}
.voided .was{text-decoration:line-through;}
/* 状態と取得元のラベル。装飾ではなく、スラッシュで並べていた項目のうち
   「その行が今どうなっているか」だけを分けて読めるようにするためのもの。
   塗りの有無で分け、青は使わない ── 未返信とGoogleから取得の両方に .on が付いており、
   青にすると操作できる部品に見える */
.tag{display:inline-block;border:1px solid #9ca3af;color:var(--text-sub);border-radius:999px;padding:0 8px;font-size:11px;line-height:1.7;white-space:nowrap;}
.tag.on{border-color:#374151;background:#374151;color:#fff;}
.box{display:inline-block;border:1px solid var(--line-strong);border-radius:var(--r-part);padding:3px 8px;font-size:12px;}
.ph{border:1px solid var(--line-strong);background:var(--ground);color:var(--text-mute);display:flex;align-items:center;justify-content:center;font-size:12px;}
.mockbar{border-bottom:1px solid #111;padding:8px 16px;font-size:12px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;}
.vsw{display:flex;align-items:center;gap:8px;border:1px solid #111;padding:3px 8px;}
.vsw button{padding:2px 8px;font-size:12px;}
.vsw button.cur{border-left:3px solid #111;padding-left:5px;}
/* 見方は head の early.js が html へ先に当てる。当たっていなければ、その画面の body に書いた既定で出し分ける */
:root[data-view=hq] [data-only=store],:root:not([data-view]) body[data-view=hq] [data-only=store]{display:none;}
:root[data-view=store] [data-only=hq],:root:not([data-view]) body[data-view=store] [data-only=hq]{display:none;}
/* 役割（何ができるか）。data-need はその役割が無いと隠し、data-lack はその役割が無いときだけ出す。
   data-as は本部の誰として見ているか。data-role が当たっていなければ管理者として扱う。お店は常に編集可 */
:root[data-role=edit] [data-need=admin],:root[data-role=view] [data-need=admin],:root[data-role=view] [data-need=edit]{display:none;}
:root:not([data-role=edit]):not([data-role=view]) [data-lack=admin],:root:not([data-role=view]) [data-lack=edit]{display:none;}
:root[data-role=edit] [data-as=admin],:root[data-role=view] [data-as=admin],:root:not([data-role=edit]) [data-as=edit],:root:not([data-role=view]) [data-as=view]{display:none;}

/* レポートの「まとめ方」。月ごとと年ごとで数字も見出しも入れ替わるので、
   両方をHTMLに書いておいて出し分ける。data-only と同じ作りにしてある */
body:not([data-k=year]) [data-konly=year]{display:none;}
body[data-k=year] [data-konly=month]{display:none;}
body:not([data-ver=old]) [data-vonly=old]{display:none;}
body[data-ver=old] [data-vonly=cur]{display:none;}

/* Google連携の「連携済み」と「未連携」。未連携の画面は手本を見られていないので、
   こちらで組んだ形をレビューに掛ける必要がある。まとめ方と同じ作りで出し分ける */
body:not([data-glink=off]) [data-gonly=off]{display:none;}
body[data-glink=off] [data-gonly=on]{display:none;}
.app{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 36px);}
.side{border-right:1px solid var(--line);background:#fff;}
.brand{border-bottom:1px solid var(--line);padding:14px 16px;}
.brand a{text-decoration:none;display:block;color:var(--text);}
.acct{border-bottom:1px solid var(--line);padding:12px 16px;font-size:12px;}
.acct .back{display:inline-block;margin-top:6px;}
.nav{padding:6px 0 20px;}
.navgroup{font-size:11px;color:var(--text-mute);padding:12px 16px 2px;}
.nav a{display:block;padding:8px 16px;text-decoration:none;color:#374151;transition:background-color var(--t-fast);}
.nav a:hover{background:var(--hover);}
.nav a.cur{border-left:3px solid var(--accent);background:var(--accent-soft);color:var(--accent-text);padding-left:13px;font-weight:700;}
.nav a.sub{padding-left:32px;font-size:13px;}
.nav a.sub.cur{padding-left:29px;}
.main{min-width:0;background:var(--ground);}
.top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;border-bottom:1px solid var(--line);padding:10px 20px;background:#fff;}
.top button,.top .box{white-space:nowrap;}
.sp{flex:1;}
.menubtn{display:none;}
.body{padding:20px;}
.phd{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.crumb{font-size:12px;margin-bottom:6px;}
.crumb .sep{margin:0 2px;color:#9ca3af;}
.acts{display:flex;gap:8px;flex-wrap:wrap;}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.cards.two{grid-template-columns:repeat(2,1fr);}
.cards.three{grid-template-columns:repeat(3,1fr);}
/* 5枚のときは、広い画面で1列、そうでなければ3枚と2枚。4列だと1枚だけ次の段に取り残される */
.cards.five{grid-template-columns:repeat(3,1fr);}
@media (min-width:1280px){.cards.five{grid-template-columns:repeat(5,1fr);}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-box);padding:14px;}
.kpi{font-size:24px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums;color:#111827;}
.kpi .kpiw{font-size:13px;font-weight:600;color:var(--text-sub);margin-right:2px;}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.cols.three{grid-template-columns:repeat(3,1fr);}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-box);margin-bottom:16px;}
/* 見出しの横にボタンやラベルが並ぶ行。狭い画面では見出しを縮めて縦に割らず、ボタンのほうを次の行へ送る */
.panelhd{border-bottom:1px solid var(--line);padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.panelbd{padding:14px;}
.panelbd>*+*{margin-top:12px;}
.panelbd>h3.sub3{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);}
.tablewrap{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums;}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;}
th{font-size:12px;white-space:nowrap;background:var(--ground);color:#374151;}
/* 見出しで並べ替える列。押せることは ↕ で、いまの向きは ▲▼ で示す */
th .sort{border:0;border-radius:0;background:none;padding:0;font-weight:inherit;color:inherit;}
th .sort:hover,th .sort:active{background:none;transform:none;text-decoration:underline;}
th .sort::after{content:"↕";margin-left:4px;color:#9ca3af;}
th[aria-sort=ascending] .sort::after{content:"▲";color:inherit;}
th[aria-sort=descending] .sort::after{content:"▼";color:inherit;}
.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.filters.one{grid-template-columns:1fr;max-width:420px;}
/* フォームの中で2つの欄を横に並べるとき。絞り込みの4列を流用すると、
   半分幅の枠の中で1欄が130px程度まで縮み、名前が入りきらない */
.filters.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.filters .f.w2{grid-column:span 2;}
.f label{display:block;font-size:12px;margin-bottom:4px;}
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line-strong);margin-bottom:16px;}
.tabs a{padding:8px 14px;text-decoration:none;color:var(--text-sub);background:#fff;border:1px solid var(--line-strong);border-bottom:0;border-radius:var(--r-part) var(--r-part) 0 0;margin-right:4px;transition:background-color var(--t-fast);}
.tabs a:hover{background:var(--hover);}
.tabs a[aria-current]{border-color:var(--accent);color:var(--accent-text);font-weight:700;}
.list li{padding:10px 0;}
.list li+li{border-top:1px solid var(--line);}
.pager{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:12px;}
.split{display:grid;grid-template-columns:minmax(0,360px) 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r-box);overflow:hidden;}
.split .pane{min-width:0;}
.split .pane+.pane{border-left:1px solid var(--line);}
.panehd{border-bottom:1px solid var(--line);padding:10px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.panebd{padding:14px;}
.panebd>*+*{margin-top:12px;}
.picks{max-height:520px;overflow-y:auto;}
.picks a{display:block;padding:12px 14px;text-decoration:none;color:var(--text);border-bottom:1px solid var(--line);transition:background-color var(--t-fast);}
.picks a:hover{background:var(--hover);}
.picks a.cur{border-left:3px solid var(--accent);background:var(--accent-soft);padding-left:11px;}
/* ダイアログの出入り。背景は薄く出して消え、本体は少し下から所定の位置へ入る。
   閉じるときは開くときより短くする ── 閉じたあとの画面へ早く戻すため。
   ダイアログからダイアログへ移るときは背景を動かさず、本体だけを入れ替える（.instant） */
.ov{position:fixed;inset:0;z-index:50;background:rgba(17,24,39,.5);overflow:auto;padding:16px;opacity:0;visibility:hidden;transition:opacity var(--t-fast) var(--ease-in),visibility 0s linear var(--t-fast);}
.ov.on{opacity:1;visibility:visible;transition:opacity var(--t-move) var(--ease-out),visibility 0s;}
.ov.instant{transition:none;}
.dlg{background:#fff;border:1px solid var(--line);border-radius:var(--r-box);box-shadow:var(--lift);max-width:540px;margin:48px auto;transform:translateY(8px);transition:transform var(--t-fast) var(--ease-in);}
.ov.on .dlg{transform:none;transition:transform var(--t-move) var(--ease-out);}
.dlghd{border-bottom:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:flex-start;}
.dlghd button{white-space:nowrap;flex-shrink:0;}
.dlgbd{padding:16px;}
.dlgbd>*+*{margin-top:12px;}
.dlgft{border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:8px;justify-content:flex-end;}
.cust{max-width:440px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line);min-height:calc(100vh - 36px);}
.custhd{border-bottom:1px solid var(--line-strong);padding:14px 16px;}
.custbd{padding:16px;}
.custbd>*+*{margin-top:16px;}
.custft{border-top:1px solid var(--line);color:var(--text-sub);padding:14px 16px;font-size:12px;}
.q{border:1px solid var(--line-strong);border-radius:var(--r-box);padding:14px;}
.q>*+*{margin-top:8px;}
.q .opts p{padding:6px 0;}
.big{display:block;width:100%;padding:12px;font-size:16px;}
/* クーポンのタイトル。お客様の画面でいちばん大きく出す */
.cpt{font-size:26px;font-weight:700;}
.cpimg{aspect-ratio:1200/630;}
/* アンケートの設問フォーム。設問文・答え方・選択肢を1枚のカードで編集する。
   選択肢は1行に1つ置く ── スラッシュで1行へ詰めると、それぞれが消せる・
   並べ替えられる単位であることが画面から読めない */
.qhd{display:grid;grid-template-columns:1fr 168px;gap:12px;}
.qi .panelhd button{padding:3px 9px;font-size:12px;}
.qo>*+*{margin-top:8px;}
.orow{display:flex;gap:8px;align-items:center;}
.orow button{white-space:nowrap;}
.qflag>*+*{margin-top:6px;}
/* 設問ごとの集計カード。設問の数だけ枚数が増えるので、1枚の中は
   設問文・答え方・内訳の順で固定する。割合は内訳の行に横棒で添え、表を横へ伸ばさない */
.cards.qsum .card>*+*{margin-top:8px;}
.cards.qsum td.pct{white-space:nowrap;}
.hbar{display:inline-block;vertical-align:middle;width:72px;height:8px;margin-right:8px;background:var(--ground);border:1px solid var(--line-strong);}
.hbar i{display:block;height:100%;background:var(--accent);}
/* 自由記入の設問は図にならないので、カードに入れず件数と入口だけの1行にする */
.freehd{margin-top:16px;font-size:13px;}
.freeq{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding:12px;border:1px solid var(--line-strong);}
/* レポートのグラフ。系列は濃淡と線の種類で分けたうえで色を重ねる ── 色を外しても読めるように。
   文字はSVGと一緒に縮むので、狭い画面では縮めずに横へ送る */
.chart{margin-top:8px;overflow-x:auto;}
.chart svg{display:block;width:100%;height:auto;min-width:480px;}
.chart.wide{margin-top:16px;}
.chart.wide svg{min-width:720px;}
.chart text{font-size:11px;fill:var(--text);}
.chart .ax{fill:var(--text-sub);}
.chart .val{font-weight:bold;}
.chart .grid{stroke:var(--line);}
.chart .axis{stroke:#9ca3af;}
.chart .bar-a{fill:var(--accent);}
.chart .bar-b{fill:#93c5fd;}
.chart rect.part{opacity:.45;}
.chart polyline{fill:none;stroke-width:2;stroke-linejoin:round;}
.chart .ln-a{stroke:var(--accent);}
.chart .ln-b{stroke:#0f766e;stroke-dasharray:6 4;}
.chart .ln-c{stroke:#9ca3af;}
.chart polyline.part{stroke-dasharray:2 4;}
.chart .pt-a{fill:var(--accent);}
/* 回答一覧の「回答」セル。設問がいくつあっても列は増やさず、
   設問名と答えをセルの中で縦に積む */
/* 返信の本文。書いたときの改行をそのまま見せる */
.pre{white-space:pre-line;}
.ans{min-width:14em;}
.ans p.note{margin-top:8px;}
.ans p.note:first-child{margin-top:0;}
/* お客様に見える画面のプレビュー。左で設問を直すとその場で入れ替わる。
   製品の枠線ではなくお客様の端末の枠なので、見出しを濃い線で区切って分ける */
.pv{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-box);max-height:520px;overflow-y:auto;}
/* プレビューの中の部品は押せないように disabled にしてあるが、お客様の画面の見た目を写すものなので薄くしない */
.pv button:disabled{opacity:1;cursor:default;}
.pvhd{border-bottom:1px solid var(--line-field);padding:12px 14px;}
.pvhd>*+*{margin-top:6px;}
.pvbd{padding:14px;}
.pvbd>*+*{margin-top:12px;}
.qr{width:160px;height:160px;}
.pop{width:100%;max-width:220px;aspect-ratio:210/297;}
@media (max-width:860px){
.app{grid-template-columns:1fr;}
.side{display:none;border-right:0;border-bottom:1px solid var(--line);}
.side.on{display:block;animation:enter var(--t-move) var(--ease-out);}
.menubtn{display:inline-block;}
.cards{grid-template-columns:1fr 1fr;}
.cards.three,.cards.five{grid-template-columns:1fr 1fr;}
.cols,.cols.three{grid-template-columns:1fr;}
.qhd{grid-template-columns:1fr;}
.filters{grid-template-columns:1fr 1fr;}
.split{grid-template-columns:1fr;}
.split .pane+.pane{border-left:0;border-top:1px solid var(--line);}
.picks{max-height:none;}
}
@media (max-width:480px){
.cards,.cards.two,.cards.three,.cards.five{grid-template-columns:1fr;}
.filters,.filters.two{grid-template-columns:1fr;}
.filters .f.w2{grid-column:auto;}
}

/* 状態が変わったことを示す動き。押した操作が受け付けられた場所を一度だけ光らせる（.flash）、
   新しく現れたものを所定の位置へ入れる（enter） */
@keyframes enter{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes arrive{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:none;}}
@keyframes flash{from{background-color:#dbeafe;}to{background-color:transparent;}}
.arrive{animation:arrive 320ms var(--ease-out);}
.flash{animation:flash 900ms ease-out;}
/* 保存したことを言葉でも残す。光るのは一瞬なので、見逃すと保存できたか分からない。押したボタンの横に置く */
.done{align-self:center;font-size:12px;color:var(--ok);}
/* メールアドレスの確認待ち。欄の下に置き、届かないときに送り直すか取り消せるようにする */
.pend{margin-top:8px;padding:10px 12px;background:var(--wait-bg);border:1px solid var(--wait-line);border-radius:var(--r-box);}
.pend>*+*{margin-top:6px;}
/* 入力の失敗。欄のすぐ下に、何をどう直すかを出す。太さと枠の太さで分けたうえで赤を重ねる */
.err{font-size:12px;font-weight:bold;margin-top:6px;color:var(--danger);}
.acts .err{margin-top:0;align-self:center;}
[data-field].bad input[type=text],[data-field].bad textarea{border:2px solid var(--danger-line);}
.q.bad{border:2px solid var(--danger-line);}
/* display を持つ部品（.tag、.ra など）に hidden を付けても消えるようにする */
[hidden]{display:none!important;}
/* 数字だけを入れ替えて見せるため、行の中で1つの箱にする */
[data-cnt]{display:inline-block;}
/* 処理中。押したボタンの上で、終わるまで待っていることを示す。ラベルを隠して幅を変えず、
   中央で輪を回す。そのあいだは押し直せない ── 二度押しで同じ処理が2回走らないように */
button[aria-busy=true]{position:relative;color:transparent!important;cursor:progress;pointer-events:none;}
button[aria-busy=true]::after{content:"";position:absolute;inset:0;margin:auto;width:14px;height:14px;border:2px solid var(--ink);border-right-color:transparent;border-radius:50%;animation:spin 700ms linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;}
}

/* レビュー欄 ── 製品の一部ではない。モックを見ながら書き込むための道具なので、
   破線で製品の枠線と区別する。印刷には出さない。 */
.rv{position:fixed;right:12px;bottom:12px;z-index:60;font-size:13px;}
.rv-sw{border:1px dashed #111;padding:7px 13px;}
.rv.has .rv-sw{background:#111;color:#fff;}
.rv-panel{position:absolute;right:0;bottom:42px;width:min(380px,calc(100vw - 24px));background:#fff;border:1px dashed #111;padding:12px;}
.rv-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;}
.rv-scr{font-size:12px;color:#555;}
.rv-ft{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.rv-st{font-size:12px;color:#555;flex-basis:100%;}
.rv-n{font-weight:700;}
@media print{.rv{display:none;}}

/* ログインまわりの画面。ログインする前なので、左のメニューも上のバーも出さず、中央に1枚だけ置く */
.auth{min-height:calc(100vh - 36px);background:var(--ground);padding:48px 16px;}
.authbox{max-width:400px;margin:0 auto;}
.authbox .brand{border:0;padding:0 0 16px;text-align:center;}
.authbox .panelbd>*+*{margin-top:12px;}
.authbox .panelbd>a{display:block;}
.authbox .pri{width:100%;}
.authbox .links{font-size:13px;text-align:center;}
.authmsg{border:1px solid var(--line);border-left:3px solid var(--ok);background:#fff;padding:10px 12px;margin-bottom:12px;font-size:13px;}
.authmsg.bad{border-left-color:var(--danger-line);}

/* 項目名と値の2列の表（連携の状態、お店の情報）。狭い画面では横スクロールにせず、項目名の下へ値を積む。
   つないでいるお店やGoogleアカウントは確かめるための情報なので、右側が切れて見えないと困る */
@media (max-width:600px){
table.kv,table.kv tbody,table.kv tr,table.kv th,table.kv td{display:block;}
table.kv tr{border:1px solid var(--line);border-top:0;}
table.kv tr:first-child{border-top:1px solid var(--line);}
table.kv th,table.kv td{border:0;}
table.kv th{white-space:normal;}
}

/* グラフにカーソルを合わせたときの列の塗りと、その列の数字。印刷（PDF）には出さない */
.chart{position:relative;}
.chart .hl{fill:var(--accent-soft);}
.ctip{position:absolute;z-index:2;pointer-events:none;min-width:150px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-part);box-shadow:0 2px 8px rgba(0,0,0,.12);padding:8px 10px;font-size:12px;line-height:1.6;}
.ctip b{display:block;margin-bottom:2px;}
.ctip .row{display:flex;align-items:center;gap:6px;}
.ctip i{display:inline-block;width:10px;height:10px;border-radius:2px;}
.ctip i.bar-a,.ctip i.ln-a{background:var(--accent);}
.ctip i.bar-b{background:#93c5fd;}
.ctip i.ln-b{background:#0f766e;}
.ctip i.ln-c{background:#9ca3af;}
@media print{.ctip,.chart .hl{display:none!important;}}