/* =========================================================
   NightWorks 新デザイン(v2 / Bootstrap5) 用スタイル
   - 既存の style.css とは別ファイル。v2 レイアウトでのみ読み込む
   - 衝突回避のため独自クラスは全て nw- プレフィックス
   - 配色は現行(style.css)準拠：青#3b82b3 / 地#f8f6f3 / ナビ#333 / 文字#222
   ========================================================= */
:root{
  --nw-ink:#333333;
  --nw-ground:#f8f6f3;
  --nw-surface:#ffffff;
  --nw-surface-2:#f2f0eb;
  --nw-line:#e2ded7;
  --nw-line-strong:#d3cec5;
  --nw-text:#222222;
  --nw-label:#3a3f45;
  --nw-muted:#5f6368;
  --nw-accent:#3b82b3;
  --nw-accent-strong:#1874a4;
  --nw-accent-soft:#e6f0f7;
  --nw-cta:#3b82b3;   /* 主要アクションも基本色ブルー（ユーザー指定・旧#e59400は廃止） */
  --nw-cta-strong:#1874a4;
  --nw-good:#5c9e00;
  --nw-good-soft:#eef6dd;
  --nw-danger:#dd0000;
  --nw-nav-text:#e9e6df;
  --nw-nav-accent:#ffef6b;
  --nw-radius:12px;
  --nw-radius-sm:8px;
  --nw-shadow:0 1px 2px rgba(20,20,20,.05),0 8px 24px -14px rgba(20,20,20,.16);
  --nw-font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --nw-ground:#181a1d; --nw-surface:#212428; --nw-surface-2:#262a2f;
    --nw-line:#33383e; --nw-line-strong:#3f454c;
    --nw-text:#eceae6; --nw-label:#c2c6cc; --nw-muted:#9aa0a8;
    --nw-accent:#6fb0d8; --nw-accent-strong:#8cc3e6; --nw-accent-soft:#20313c;
    --nw-cta:#4a90bd; --nw-cta-strong:#6fb0d8;
    --nw-good:#8ec63f; --nw-good-soft:#233016; --nw-danger:#e0705f;
    --nw-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.6);
  }
}

body{background:var(--nw-ground);color:var(--nw-text);font-family:var(--nw-font);
  font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:clip;} /* 横はみ出しの保険。clipはスクロールコンテナを作らないためstickyと両立 */

/* リンクは旧サイト同様、基本ブルー（各コンポーネントのクラス指定が優先される） */
a{color:var(--nw-accent-strong);}
a:hover{color:var(--nw-accent);}

/* ── ナビ（BS5 navbar を #333 に。ブランド要素として常に暗色） ── */
.nw-navbar{background:var(--nw-ink)!important;border-bottom:1px solid rgba(255,255,255,.06);}
/* ブランドは旧デザイン実寸に合わせる（ロゴ32px・文字17px/スマホ13px） */
.nw-navbar .navbar-brand{color:#eee;font-weight:400;font-size:17px;display:flex;align-items:center;gap:8px;}
.nw-navbar .navbar-brand:hover,.nw-navbar .navbar-brand:focus{color:#fff;}
.nw-navbar .navbar-brand .nw-mark{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--nw-accent),var(--nw-accent-strong));color:#fff;font-size:14px;}
/* リンク16px・アイコン18pxは旧デザイン(.navbar .nav .fa)実寸 */
.nw-navbar .nav-link{color:#d2d5d9;font-size:16px;display:inline-flex;align-items:center;gap:6px;border-radius:7px;}
.nw-navbar .nav-link .fa,.nw-navbar .nav-link .fas,.nw-navbar .nav-link .fab{font-size:18px;}
.nw-navbar .nav-link:hover,.nw-navbar .nav-link:focus{color:#fff;background:rgba(255,255,255,.08);}
.nw-navbar .nav-link.nw-gear{color:var(--nw-nav-accent);}
.nw-navbar .dropdown-menu{font-size:16px;}
/* ハンバーガーは枠なしの三本線のみ（シンプルに）。線はBS5標準より太く・明るく */
.nw-navbar{--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23eeeeee' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3.4' d='M4 6.5h22M4 15h22M4 23.5h22'/%3e%3c/svg%3e");}
.nw-navbar .navbar-toggler{border:0;border-radius:0;box-shadow:none;}
.nw-navbar .navbar-toggler-icon{width:28px;height:28px;}
.nw-navbar .navbar-toggler:focus{box-shadow:none;}
.nw-navbar .navbar-toggler:focus-visible{outline:2px solid rgba(255,255,255,.5);outline-offset:2px;}
.nw-bell{position:relative;}
.nw-bell .nw-dot{position:absolute;top:4px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--nw-danger);border:1.5px solid var(--nw-ink);}
/* スマホ/タブレット用クイックボタン（v1の navbar-nav_main/_sub 相当。#555ボタンはロゴ寄り・ベルは右寄せ） */
.nw-quick{display:flex;align-items:center;gap:6px;}
.nw-quick-btn{background:#555;color:#eee;border-radius:4px;padding:6px 9px;font-size:13px;
  text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.2;}
.nw-quick-btn:hover,.nw-quick-btn:focus{background:#78b5d5;color:#fff;}
.nw-quick-btn .fas{font-size:15px;}
a.nw-quick-bell{color:#eee;font-size:18px;padding:4px 6px;text-decoration:none;}
a.nw-quick-bell:hover,a.nw-quick-bell:focus{color:#78b5d5;}
a.nw-quick-bell .nw-dot{top:2px;right:2px;}

.nw-ic{width:1em;height:1em;display:inline-block;vertical-align:-.09em;fill:currentColor;}

/* ── 本文 ── */
/* 現行標準に合わせ最大1200px */
.nw-wrap{max-width:1200px;margin:0 auto;padding:24px 16px 64px;}
.nw-preview-note{font-size:13px;color:var(--nw-muted);display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.nw-preview-note .nw-tag{background:var(--nw-accent-soft);color:var(--nw-accent-strong);font-weight:700;
  padding:2px 9px;border-radius:999px;font-size:12px;}

.nw-page-head{display:flex;align-items:center;gap:11px;margin:2px 0 18px;}
.nw-page-head h1{font-size:22px;font-weight:700;margin:0;color:var(--nw-text);}
.nw-page-head .nw-hi{width:34px;height:34px;border-radius:9px;background:var(--nw-accent-soft);
  color:var(--nw-accent-strong);display:grid;place-items:center;flex:none;}

.nw-toolbar{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap;}

.nw-btn{font-family:inherit;font-size:14px;font-weight:600;border-radius:var(--nw-radius-sm);
  padding:8px 15px;border:1px solid var(--nw-line-strong);background:var(--nw-surface);color:var(--nw-text);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:7px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .05s;}
.nw-btn:hover{background:var(--nw-surface-2);border-color:var(--nw-muted);color:var(--nw-text);}
.nw-btn:active{transform:translateY(1px);}
.nw-btn-cta{background:var(--nw-cta);border-color:var(--nw-cta);color:#fff;}
.nw-btn-cta:hover{background:var(--nw-cta-strong);border-color:var(--nw-cta-strong);color:#fff;}
.nw-btn-sm{padding:6px 12px;font-size:13px;}
.nw-btn:focus-visible,.nw-seg button:focus-visible{outline:2px solid var(--nw-accent);outline-offset:2px;}

.nw-alert{display:flex;align-items:center;gap:9px;background:var(--nw-good-soft);color:var(--nw-good);
  border:1px solid rgba(92,158,0,.35);border-radius:var(--nw-radius-sm);padding:11px 14px;font-size:14px;
  margin-bottom:18px;font-weight:600;}

.nw-card{background:var(--nw-surface);border:1px solid var(--nw-line);border-radius:var(--nw-radius);
  box-shadow:var(--nw-shadow);margin-bottom:20px;overflow:hidden;}
.nw-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--nw-line);}
.nw-card-head h2{margin:0;font-size:15px;font-weight:700;color:var(--nw-text);display:flex;align-items:center;gap:8px;}
.nw-card-head h2 .nw-hi{color:var(--nw-accent);}
.nw-card-body{padding:6px 18px;}

.nw-dl{display:grid;grid-template-columns:200px 1fr;}
.nw-dl>div{display:contents;}
.nw-dl dt,.nw-dl dd{margin:0;padding:13px 4px;border-top:1px solid var(--nw-line);font-size:14px;}
.nw-dl>div:first-child dt,.nw-dl>div:first-child dd{border-top:none;}
.nw-dl dt{color:var(--nw-label);font-weight:600;}
.nw-dl dd{color:var(--nw-text);font-variant-numeric:tabular-nums;}
.nw-dl dd .nw-sub,.nw-dl dt .nw-sub{display:block;color:var(--nw-muted);font-size:12.5px;margin-top:3px;font-weight:400;}
.nw-link{color:var(--nw-accent-strong);text-decoration:none;font-weight:600;}
.nw-link:hover{text-decoration:underline;}

.nw-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;}
.nw-pill-plan{background:var(--nw-accent-soft);color:var(--nw-accent-strong);}
.nw-pill-good{background:var(--nw-good-soft);color:var(--nw-good);}

.nw-g-connect{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--nw-line-strong);
  background:var(--nw-surface-2);border-radius:var(--nw-radius-sm);padding:8px 14px;font-size:13.5px;
  font-weight:600;text-decoration:none;color:var(--nw-text);}
.nw-g-connect:hover{border-color:var(--nw-muted);color:var(--nw-text);}
.nw-g-connect .nw-g{width:16px;height:16px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-weight:800;font-size:11px;color:#4285F4;border:1px solid #dcdcdc;}

.nw-actions-center{padding:18px;text-align:center;border-top:1px solid var(--nw-line);}

/* デザイン設定トグル */
.nw-seg-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:10px 0 4px;}
.nw-seg{display:inline-flex;background:var(--nw-surface-2);border:1px solid var(--nw-line-strong);
  border-radius:999px;padding:3px;gap:2px;}
.nw-seg button{font-family:inherit;font-size:13.5px;font-weight:700;border:none;background:transparent;
  color:var(--nw-label);padding:7px 16px;border-radius:999px;cursor:pointer;display:flex;gap:7px;align-items:center;}
.nw-seg button[aria-pressed="true"]{background:var(--nw-accent);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);}
.nw-seg-note{font-size:13px;color:var(--nw-muted);max-width:360px;margin:0;}
.nw-seg-note strong{color:var(--nw-text);}

/* テーブル（支払履歴等） */
.nw-table-scroll{overflow-x:auto;} /* 最終保険。基本は列の出し分けで幅内に収める方針 */
table.nw-table{width:100%;border-collapse:collapse;font-size:14px;}
table.nw-table th,table.nw-table td{text-align:left;padding:12px 14px;border-top:1px solid var(--nw-line);
  white-space:nowrap;color:var(--nw-text);}
table.nw-table thead th{border-top:none;color:var(--nw-label);font-weight:700;font-size:12.5px;background:var(--nw-surface-2);}
table.nw-table tbody tr:hover{background:var(--nw-surface-2);}
table.nw-table td.nw-amt{font-variant-numeric:tabular-nums;text-align:right;}
table.nw-table .nw-pdf{color:var(--nw-accent-strong);text-decoration:none;font-weight:600;display:inline-flex;gap:6px;align-items:center;}

.nw-empty{text-align:center;color:var(--nw-muted);padding:18px;}
.nw-paginate{display:flex;justify-content:center;margin:14px 0;}
.nw-hr{border:none;border-top:1px solid var(--nw-line);margin:26px 0;}

/* ── 共通クロム（ローディング/ヘルプ/フッター） ── */
.loading{position:fixed;inset:0;pointer-events:none;z-index:1080;}
.loader{position:fixed;inset:0;background:rgba(255,255,255,.55);display:grid;place-items:center;}
@media (prefers-color-scheme:dark){.loader{background:rgba(0,0,0,.45);}}
#loader_icon{width:44px;height:44px;border-radius:50%;border:4px solid var(--nw-accent-soft);
  border-top-color:var(--nw-accent);animation:nw-spin .8s linear infinite;}
@keyframes nw-spin{to{transform:rotate(360deg);}}

#help_btn{position:fixed;left:16px;bottom:16px;z-index:1050;} /* 左下配置（右下はスクロールUPと重なるため） */
#help_btn a{display:inline-flex;align-items:center;gap:7px;background:var(--nw-accent);color:#fff;
  text-decoration:none;padding:9px 14px;border-radius:999px;box-shadow:var(--nw-shadow);font-size:13.5px;font-weight:600;}
#help_btn a:hover{background:var(--nw-accent-strong);}

#footer{text-align:center;color:var(--nw-muted);font-size:10px;padding:26px 0 8px;}
#footer a,#footer copyright a{color:var(--nw-accent-strong);text-decoration:none;}

@media (max-width:640px){
  .nw-dl{grid-template-columns:1fr;}
  .nw-dl dt{padding-bottom:0;border-top:1px solid var(--nw-line);}
  .nw-dl dd{padding-top:5px;border-top:none;}
  .nw-dl>div:first-child dd{border-top:none;}
  .nw-page-head h1{font-size:20px;}
  /* 「?」だけの表示時は楕円でなく正円にする */
  #help_btn .nw-help-label{display:none;}
  #help_btn a{width:44px;height:44px;padding:0;gap:0;justify-content:center;border-radius:50%;}
}

/* ── 顧客一覧(home) ── */
.nw-topbar{display:flex;align-items:center;gap:10px;margin:2px 0 10px;flex-wrap:wrap;}
.nw-topbar h1{font-size:20px;margin:0;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--nw-text);}
.nw-topbar .nw-count{color:var(--nw-muted);font-size:13px;font-variant-numeric:tabular-nums;}
.nw-topbar .nw-spacer{flex:1;}

/* 顧客リスト上部のショートカット（スタッフ管理TOP等） */
.nw-shopnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}

/* 顧客データ管理のタブ（v1の nav-tabs 相当）。形状は従来のまま、下線なし・未選択=白・選択=地色 */
.nw-tabs{display:flex;gap:4px;margin:4px 0 14px;}
.nw-tabs a{flex:1;text-align:center;padding:8px 4px;font-size:13px;font-weight:600;color:var(--nw-accent-strong);
  text-decoration:none;background:var(--nw-surface);border:1px solid var(--nw-line);border-bottom:none;
  border-radius:var(--nw-radius-sm) var(--nw-radius-sm) 0 0;}
.nw-tabs a:hover{color:var(--nw-accent);}
.nw-tabs a.active{color:var(--nw-text);background:var(--nw-ground);border-color:var(--nw-line-strong);}

/* CSVインポートのファイル選択 */
.nw-fileinput{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}
.nw-fileinput p{color:#fff;background-color:var(--nw-cta);padding:5px 14px;border-radius:16px;font-size:12.5px;}
.nw-fileinput p:hover{background-color:var(--nw-cta-strong);}
.nw-fileinput input[type=text]{flex:1;min-width:180px;font-family:inherit;font-size:16px;padding:7px 10px;
  border:1px solid var(--nw-line-strong);border-radius:var(--nw-radius-sm);background:var(--nw-ground);color:var(--nw-text);cursor:pointer;}
/* ファイル選択行もボタンと入力の高さを揃える */
.nw-fileinput p{height:40px;display:inline-flex;align-items:center;box-sizing:border-box;border-radius:20px;margin:0;}
.nw-fileinput input[type=text]{height:40px;box-sizing:border-box;}

.nw-search{background:var(--nw-surface);border:1px solid var(--nw-line);border-radius:var(--nw-radius);
  box-shadow:var(--nw-shadow);padding:10px 12px;margin-bottom:12px;}
.nw-search-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.nw-search .nw-field{position:relative;flex:1;min-width:140px;}
.nw-search .nw-search-actions{display:flex;gap:8px;align-items:center;}
.nw-search input[type=text]{width:100%;font-family:inherit;font-size:16px;padding:7px 10px 7px 10px;
  border:1px solid var(--nw-line-strong);border-radius:var(--nw-radius-sm);background:var(--nw-ground);color:var(--nw-text);}
.nw-search input[type=text]:focus{outline:none;border-color:var(--nw-accent);box-shadow:0 0 0 3px var(--nw-accent-soft);}
.nw-search details{margin-top:8px;}
.nw-search summary{cursor:pointer;font-size:13px;color:var(--nw-accent-strong);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:5px;}
.nw-search summary::-webkit-details-marker{display:none;}
.nw-search details[open] summary .nw-caret{transform:rotate(90deg);}
.nw-search .nw-caret{display:inline-block;transition:transform .15s;}
.nw-search .nw-detail-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;}
.nw-search select{font-family:inherit;font-size:16px;padding:7px 10px;border:1px solid var(--nw-line-strong);
  border-radius:var(--nw-radius-sm);background:var(--nw-ground);color:var(--nw-text);max-width:100%;}
/* 検索行の入力・プルダウン・ボタンの高さを統一 */
.nw-search input[type=text],.nw-search select,.nw-search .nw-btn,.nw-search input[type=submit]{height:40px;box-sizing:border-box;}

.nw-list-meta{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2px;margin:4px 0;}
.nw-sortline{font-size:12.5px;color:var(--nw-muted);margin:4px 0 8px;}
.nw-sortline .fa,.nw-sortline .fas{margin-right:3px;}

table.nw-list{width:100%;border-collapse:collapse;font-size:14px;line-height:1.3;background:var(--nw-surface);}
table.nw-list thead th{text-align:left;padding:6px 8px;background:var(--nw-surface-2);color:var(--nw-label);
  font-weight:700;font-size:13px;border-bottom:1px solid var(--nw-line);white-space:nowrap;}
table.nw-list tbody td{padding:7px 8px;border-bottom:1px solid var(--nw-line);vertical-align:middle;}
table.nw-list tbody tr:hover{background:var(--nw-surface-2);}
table.nw-list a{color:var(--nw-accent-strong);text-decoration:none;}
table.nw-list a:hover{color:var(--nw-accent);}
table.nw-list .nw-name{font-weight:700;font-size:15px;}
table.nw-list td .x-small,table.nw-list td .small{color:var(--nw-muted);}

/* ── v1互換(共通クラス最低限・v2レイアウト下で使用) ── */
.small,small{font-size:85%;}
.x-small,x-small{font-size:70%;font-weight:normal;}
.sp_fontsize{font-size:100%;}
.sepa{color:#bbb;}
.alert_msg{color:var(--nw-danger);}
p.hello_msg{margin:0;}
p.limit_level{float:right;font-size:11px;margin:2px 0 0 0;color:#fff;background-color:var(--nw-accent);padding:1px 8px;border-radius:10px;}
.display_homeinfo{float:right;text-align:right;margin-bottom:10px;}
.display_homeinfo p{margin:0;font-size:12px;line-height:1.3em;}
.head_massage{background-color:#ffffdd;padding:2px 6px;border-radius:4px;margin:0 0 11px;}
.head_massage p{margin:0;}
@media (prefers-color-scheme:dark){.head_massage{background-color:#3a3a20;}}
.newregist_btn{float:right;margin:0 0 5px;}
p.elapsed_days-small{display:inline-block;font-size:9px;margin:0 2px;color:#fff;background-color:#999;padding:0 4px;border-radius:10px;}
.birthday_box{display:inline;}
.birthday_box i{margin:0 1px 0 2px;color:#e06fa5;}
.birthday_box p{display:inline;font-size:70%;}
.list_photo{width:40px;height:40px;overflow:hidden;position:relative;border-radius:6px;}
img.list_upimages{width:40px;height:40px;object-fit:cover;}
.list_star-icons{width:40px;text-align:center;}
.clear{clear:both;}
.pc_clear{clear:both;} /* v1互換: 友人・知人欄の3個(PC)/2個(≤380)ごとの折返し。≤380で.sp_clearと入替 */
.pageup{display:none;position:fixed;bottom:-1px;right:20px;z-index:1040;}
.pageup a{display:block;width:44px;height:44px;background:var(--nw-ink);color:#fff;text-align:center;line-height:44px;border-radius:8px 8px 0 0;text-decoration:none;opacity:.85;}

/* BS3系ボタンの互換（v1から流用するアラートブロック用） */
.btn-default{background:var(--nw-surface);border:1px solid var(--nw-line-strong);color:var(--nw-text);}
.btn-default:hover{background:var(--nw-surface-2);border-color:var(--nw-muted);color:var(--nw-text);}
.btn-sl{padding:10px 24px;}

/* BS3ページネーション(Paginator::useBootstrap)の互換 */
.paginate{display:flex;justify-content:center;margin:10px 0;}
.paginate .pagination{display:flex;gap:4px;list-style:none;padding:0;margin:0;flex-wrap:wrap;}
.paginate .pagination li a,.paginate .pagination li span{min-width:32px;height:32px;display:grid;place-items:center;
  padding:0 6px;border-radius:7px;border:1px solid var(--nw-line-strong);background:var(--nw-surface);
  color:var(--nw-accent-strong);text-decoration:none;font-size:13px;font-variant-numeric:tabular-nums;}
.paginate .pagination li.active span{background:var(--nw-accent);border-color:var(--nw-accent);color:#fff;}
.paginate .pagination li.disabled span{opacity:.4;color:var(--nw-muted);}
.paginate .pagination li a:hover{background:var(--nw-surface-2);}

/* ── 顧客詳細(c_detail) ── */
.nw-cust-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px;}
.nw-cust-head .nw-cust-shop{font-weight:700;}
.nw-cust-head .nw-iconlink{font-size:18px;color:var(--nw-accent-strong);text-decoration:none;}
.nw-cust-head .nw-iconlink.nw-del{color:#9d4a45;}
.nw-cust-head .nw-cust-id{margin-left:auto;color:var(--nw-muted);font-size:13px;font-variant-numeric:tabular-nums;}
.name_box{font-weight:bold;font-size:200%;}
p.elapsed_days{display:inline-block;font-size:11px;margin:4px 2px 0;color:#fff;background-color:#999;padding:1px 8px;border-radius:12px;}
p.elapsed_days abbr{text-decoration:none;}
.bottle_detail{padding:2px 0;}
.bottle_detail + .bottle_detail{border-top:1px dashed var(--nw-line);margin-top:6px;padding-top:8px;}
.infotip{display:inline-block;width:18px;height:18px;line-height:18px;text-align:center;border-radius:50%;
  background:rgba(0,0,0,.06);font-size:12px;font-weight:700;color:var(--nw-muted);vertical-align:middle;}
.infotip abbr{text-decoration:none;cursor:help;}
.nw-dl dd .form-control{font-family:inherit;font-size:16px;padding:7px 10px;border:1px solid var(--nw-line-strong);
  border-radius:var(--nw-radius-sm);background:var(--nw-ground);color:var(--nw-text);max-width:230px;display:inline-block;}
.nw-dl dd .form-control:focus{outline:none;border-color:var(--nw-accent);box-shadow:0 0 0 3px var(--nw-accent-soft);}
.nw-inline-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.customer_payment{font-size:15px;margin-bottom:10px;}
.customer_payment strong{font-size:19px;font-variant-numeric:tabular-nums;}
.nw-actionbar{position:sticky;bottom:0;z-index:15;background:color-mix(in srgb,var(--nw-ground) 88%,transparent);
  backdrop-filter:blur(4px);border-top:1px solid var(--nw-line);margin:24px -16px 0;padding:10px 16px;
  display:flex;justify-content:center;gap:10px;}
img.img-rounded{border-radius:8px;}
.tel-link a{color:var(--nw-accent-strong);}

/* 説明ヘルプ(?)のツールチップ（tooltip.min.js が body 直下に #tooltip を生成） */
#tooltip{position:absolute;z-index:1100;max-width:340px;padding:12px 14px;
  color:#fff;background:rgba(20,20,20,.88);border-radius:8px;
  font-size:12.5px;line-height:1.6;text-align:left;box-shadow:0 3px 10px rgba(0,0,0,.3);}
#tooltip:after{content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px;
  width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;
  border-top:10px solid rgba(20,20,20,.88);}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid rgba(20,20,20,.88);top:-20px;bottom:auto;}
#tooltip.left:after{left:10px;margin:0;}
#tooltip.right:after{right:10px;left:auto;margin:0;}

/* ── 顧客登録(c_add) ── */
.nw-alert-danger{background:#fbe6e6;color:var(--nw-danger);border:1px solid rgba(204,0,0,.25);}
.require{color:#fff;background-color:var(--nw-danger);padding:1px 5px;border-radius:3px;font-size:72%;font-weight:normal;vertical-align:middle;}
.imgInput label{color:#fff;background-color:#DD0000;padding:4px 12px 3px 10px;border-radius:16px;font-size:12px;margin:5px 3px;cursor:pointer;}
.nw-addform .nw-dl dd .form-control{max-width:420px;width:100%;}
.nw-addform .nw-dl dd>.form-control{margin:4px 0;} /* 会社名/所属など同一項目内で縦に並ぶ入力欄の間隔 */
.nw-addform .nw-dl dd>.add-clear-span>.form-control{margin:4px 0;} /* add_clearラッパー越しでも同じ縦間隔に */
/* add_clear(入力内クリア✖)は入力欄の縦中央に(プラグインはtop:2固定のインラインstyleのため!importantで補正) */
.add-clear-span>a{top:50%!important;transform:translateY(-50%);right:8px!important;
  font-size:13px;line-height:1!important;color:var(--nw-muted)!important;text-decoration:none!important;}
.nw-addform .nw-dl dd .form-control.numbers{max-width:230px;}
.nw-addform .nw-dl dd .form-control.lastvisit{max-width:260px;}
/* ボトル行は選択式/自由入力とも同一幅で列を揃える（PC: 名300/番号・残量96/日付150） */
.nw-addform .nw-dl dd .form-control.bottle_select{width:300px;max-width:100%;min-width:0;}
.nw-addform .nw-dl dd .form-control.text_memo{width:96px;}
.nw-addform .nw-dl dd .form-control.bottle_date{width:150px;background-color:var(--nw-surface-2);}
.nw-addform .nw-dl dd .form-control.select_birthday_year{max-width:140px;width:auto;}
.nw-addform .nw-dl dd .form-control.select_birthday{max-width:100px;width:auto;}
.nw-addform .nw-dl dd .form-control.customer_tbl_3{max-width:260px;width:auto;float:left;}
/* 友人・知人の1枠1行(編集画面。行div+×は nw-bottle-rows.js が生成) */
/* ※add_clearプラグインが入力欄を.add-clear-spanで包むため、幅はラッパー側に効かせる。
   ラッパーは伸ばさない(flex-grow 0)＝「×」が入力欄のすぐ右横に付く */
.nw-addform .nw-fri-row{display:flex;align-items:center;margin:4px 0;}
.nw-addform .nw-fri-row>.add-clear-span,
.nw-addform .nw-fri-row>.form-control.customer_tbl_3{flex:0 1 300px;min-width:0;}
.nw-addform .nw-dl dd .nw-fri-row .form-control.customer_tbl_3{float:none;width:100%;max-width:none;}
.nw-addform .nw-dl dd textarea.form-control{display:block;}
.nw-addform .add_bottle_detail{padding-bottom:6px;margin-bottom:6px;border-bottom:1px dashed var(--nw-line);}
/* 行削除の「×」: 26px正円+SVG十字で描画（文字グリフだと上下に微妙にズレるため文字は透明化）。
   インラインstyle="background:#666666"より優先するためbackgroundは!important */
.nw-addform .list_b_del,.nw-addform .list_f_del{margin:0 0 0 3px;}
.nw-addform p.elapsed_days[id$="_del"]{margin:4px 2px 0;}
/* PC幅: inline-block(ベースライン揃え)の入力欄に対し、inline-flexの「×」はベースライン計算がズレて
   半分ほど下に落ちるため、行内の×と経過日数ピルは入力欄の縦中央に揃える */
.nw-addform p.elapsed_days,.nw-addform .list_b_del,.nw-addform .list_f_del{vertical-align:middle;}
.nw-addform .list_b_del,.nw-addform .list_f_del,.nw-addform p.elapsed_days[id$="_del"]{
  width:26px;height:26px;padding:0;border:0;border-radius:50%;display:inline-flex;flex:none;cursor:pointer;
  background:#666666 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' d='M3 3l6 6M9 3l-6 6'/%3e%3c/svg%3e") center/11px no-repeat!important;
  color:transparent!important;font-size:0;line-height:0;}
.nw-addform .add_field{display:inline-block;cursor:pointer;}
.nw-addform #bottle_add_oth{display:block;border-radius:var(--nw-radius-sm);cursor:pointer;max-width:420px;}
.nw-addform .bottle_form_oth{margin-top:6px;}
/* 担当者リストの選択プルダウン: 下向き矢印だけを表示（選択値のテキストは出さない。選んだ値は入力欄に入る） */
.nw-addform #SelectCharge{height:36px;padding:0;border:1px solid var(--nw-line-strong);border-radius:var(--nw-radius-sm);
  -webkit-appearance:none;appearance:none;color:transparent;cursor:pointer;
  background:var(--nw-ground) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3e%3c/svg%3e") center/12px no-repeat;}
.nw-addform #SelectCharge option{color:#222222;background:#ffffff;}
.nw-addform input[type="checkbox"]{width:16px;height:16px;vertical-align:-2px;accent-color:var(--nw-accent);}

/* お知らせ(info) */
.info_box{background:var(--nw-surface);border:1px solid var(--nw-line);border-radius:var(--nw-radius);
  box-shadow:var(--nw-shadow);padding:14px 18px;margin:12px 0;}
.info_box h4{font-size:15px;font-weight:700;margin:0 0 6px;color:var(--nw-text);}
.info_box .info_date{float:right;font-weight:400;font-size:12px;color:var(--nw-muted);}
.info_box p.info{margin:6px 0;}
.info_box .info_more{text-align:right;font-size:80%;margin:4px 0 0;}

/* 操作完了画面（登録・編集・削除の完了） */
.nw-done-box{background:var(--nw-surface);border:1px solid var(--nw-line);border-radius:var(--nw-radius);
  box-shadow:var(--nw-shadow);text-align:center;padding:40px 20px 30px;margin:44px auto 0;max-width:640px;}
.nw-done-box h2{font-size:18px;font-weight:700;color:var(--nw-text);margin:0;}
.nw-done-icon{font-size:36px;color:var(--nw-good);margin:0 0 10px;}
.nw-done-note{color:var(--nw-muted);font-size:12.5px;margin:16px 0 0;}

/* 空状態 */
.nw-empty-box{background:var(--nw-surface);border:1px dashed var(--nw-line-strong);border-radius:var(--nw-radius);
  text-align:center;padding:36px 16px;margin:14px 0;}
.nw-empty-box h2{font-size:17px;color:var(--nw-muted);margin:0 0 6px;}

/* 年払いタブの更新作業チェック（メ/請/入 + メモ） */
.nw-flag{display:inline-block;min-width:26px;text-align:center;padding:2px 7px;border:1px solid var(--nw-line-strong);
  border-radius:12px;color:var(--nw-muted);background:var(--nw-surface);cursor:pointer;user-select:none;font-size:12px;}
.nw-flag.on{background:var(--nw-accent);border-color:var(--nw-accent);color:#fff;}
.nw-flag-memo{cursor:pointer;color:var(--nw-muted);margin-left:4px;font-size:15px;}
.nw-flag-memo.on{color:var(--nw-accent-strong);}

/* 認証系（ログイン/新規登録などゲスト画面） */
.nw-auth{max-width:400px;margin:20px auto 0;}
.nw-auth .nw-card-body{padding:20px 18px 24px;}
@media (max-width:640px){.nw-auth .nw-card-body{padding:16px 12px 20px;}}
.nw-auth-title{font-size:20px;font-weight:700;text-align:center;margin:8px 0 16px;color:var(--nw-text);}
.nw-auth-field{margin-top:14px;}
.nw-auth-field>label{display:block;font-weight:600;color:var(--nw-label);margin-bottom:4px;font-size:14px;}
.nw-auth-field input[type=text],.nw-auth-field input[type=password],.nw-auth-field input[type=email]{
  width:100%;padding:8px 10px;border:1px solid var(--nw-line-strong);border-radius:6px;
  font-size:16px;background:var(--nw-surface);color:var(--nw-text);}
.nw-auth-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px;align-items:center;}
/* Googleログインボタン（v1のbootstrap-social相当の最小スタイル） */
.btn-social.btn-google{display:inline-block;background:#fff;color:#444;border:1px solid var(--nw-line-strong);
  border-radius:6px;padding:9px 14px;font-weight:600;text-decoration:none;}
.btn-social.btn-google:hover{background:#f5f7f9;color:#222;}

/* 決済失敗の分類バッジ（PAY.JPタブ） */
.nw-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap;}
.nw-badge-danger{background:#f8e0de;color:#9d2b22;}
.nw-badge-warn{background:#fdf2d0;color:#8a6d00;}
.nw-badge-ok{background:#def0de;color:#1e7a2e;}

/* ── レスポンシブの列出し分け（v1 style.css 準拠。テーブルは横スクロールさせない方針） ── */
.pc_none{display:none!important;}      /* PCで隠しスマホで表示 */
.pc_none_tab{display:none;}            /* PCで隠しタブレット以下で表示 */
@media screen and (max-width:960px){
  .tab_none{display:none!important;}   /* タブレット以下で隠す */
  .pc_none_tab{display:inline;}
}
@media screen and (max-width:767px){
  .sp_none{display:none!important;}    /* スマホで隠す */
  .pc_none{display:inline!important;}
  table.nw-list tbody td{padding:6px 3px;}
  .nw-wrap{padding:24px 12px 64px;}
  .nw-card-body{padding:6px 10px;}
  /* 画面下部の操作ボタンは同じ幅に揃える */
  /* ※ネガティブマージンは .nw-wrap の左右padding(12px)と一致させる（ずれると横はみ出しの原因） */
  .nw-actionbar{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px;}
  .nw-actionbar .nw-btn{flex:1;text-align:center;justify-content:center;}
  /* 上部ショートカットは折り返さず一列に収める */
  .nw-shopnav{flex-wrap:nowrap;gap:6px;}
  .nw-shopnav .btn{flex:1;min-width:0;padding:6px 2px;font-size:clamp(10px,3vw,12px);white-space:nowrap;text-align:center;}
  /* 検索欄: 顧客名/キーワードは全幅、検索/リセットは絞り込みの下に等幅で */
  .nw-search{display:flex;flex-direction:column;gap:8px;}
  .nw-search-row{display:contents;}
  .nw-search .nw-field{order:1;flex:none;width:100%;min-width:0;}
  .nw-search details{order:2;margin-top:0;}
  .nw-search .nw-search-actions{order:3;}
  .nw-search .nw-search-actions .nw-btn{flex:1;text-align:center;justify-content:center;}
  /* データ管理タブはアイコンを隠して1列に収める */
  .nw-tabs a{font-size:11.5px;padding:7px 2px;}
  .nw-tabs a i{display:none;}
  /* フォーム内のプルダウン(プラン変更・業種等)は画面幅いっぱいに */
  .nw-dl dd select.form-control{width:100%;max-width:none;}
  /* ── ヘッダーを1行に収める（ブランドは旧デザインのスマホ実寸13px） ── */
  .nw-navbar .container-fluid{padding-left:10px;padding-right:10px;}
  .nw-navbar .navbar-brand{font-size:13px;gap:6px;margin-right:6px;flex-shrink:1;min-width:0;}
  /* 収まらない場合はブランド文字を省略し、ボタン類を2段目に落とさない */
  .nw-navbar .navbar-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .nw-navbar .navbar-toggler{padding:4px 8px;font-size:16px;flex:none;}
  .nw-quick{gap:4px;flex:none;}
  .nw-quick-btn{padding:5px 7px;}
  a.nw-quick-bell{padding:2px 4px;}

  /* ── 登録・編集フォーム(c_add/c_edit/m_add)のスマホ調整 ── */
  /* 項目間の余白を確保して詰まりを解消 */
  .nw-addform .nw-dl dt{padding-top:14px;}
  .nw-addform .nw-dl dd{padding-bottom:16px;}
  /* テキスト入力は画面幅いっぱいに（電話・郵便・来店回数など230px系も含む） */
  .nw-addform .nw-dl dd .form-control.numbers,
  .nw-addform .nw-dl dd .form-control.lastvisit{max-width:none;}
  .nw-addform .nw-dl dd select.form-control.numbers{width:100%;max-width:none;} /* 都道府県 */
  /* 入力欄の後ろの注記(※数字のみ等/来店数)は欄の下の行へ */
  .nw-addform .nw-dl dd input+span.small{display:block;margin:4px 0 0;}
  /* 誕生日の年/月/日は1行に収まる幅に */
  .nw-addform .nw-dl dd .form-control.select_birthday_year{max-width:112px;}
  .nw-addform .nw-dl dd .form-control.select_birthday{max-width:86px;}
  .nw-addform .nw-dl dd hr{margin:12px 0 6px;}
  /* ボトル行: グリッドで列位置を固定（1行目=ボトル名+番号+残量 / 2行目=日付+×+経過日数）。
     add_clearの.add-clear-spanラッパーやpickadateの.picker(absolute)が行内に挿入されても
     セル幅は固定のため全行のカラム境界が完全に一致する */
  .nw-addform .list_b_var,.nw-addform .bottle_form_oth,
  .nw-addform .bottle_formedit_1,.nw-addform .bottle_formedit_2,.nw-addform .bottle_formedit_3,
  .nw-addform .bottle_formedit_oth{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px;gap:6px;align-items:center;}
  .nw-addform .list_b_var .clear,.nw-addform .bottle_form_oth .clear,
  .nw-addform .bottle_formedit_1 .clear,.nw-addform .bottle_formedit_2 .clear,
  .nw-addform .bottle_formedit_3 .clear,.nw-addform .bottle_formedit_oth .clear{display:none;}
  /* 1列目=ボトル名（select直接 または add-clear-spanラッパー） */
  .nw-addform .nw-dl dd .form-control.bottle_select{grid-column:1;width:100%;max-width:none;min-width:0;}
  .nw-addform .bottle_formedit_oth>.add-clear-span,.nw-addform .bottle_form_oth>.add-clear-span,
  .nw-addform .list_b_var>.add-clear-span{grid-column:1;min-width:0;}
  /* ラッパー内の入力欄はセル全幅（.nw-dl dd経由の高い特異度で width:auto に勝たせる） */
  .nw-addform .nw-dl dd .add-clear-span>.form-control.bottle_select{width:100%;max-width:none;}
  /* 2〜3列目=番号/残量（64px固定セル） */
  .nw-addform .nw-dl dd .form-control.text_memo{width:100%;max-width:none;min-width:0;}
  /* 2行目: 日付は1列目に配置＝ボトル名と完全同幅。×と経過日数が右に続く */
  .nw-addform .nw-dl dd .form-control.bottle_date{grid-column:1;width:100%;max-width:none;}
  .nw-addform .list_b_var p.elapsed_days,.nw-addform .bottle_form_oth p.elapsed_days,
  .nw-addform .bottle_formedit_1 p.elapsed_days,.nw-addform .bottle_formedit_2 p.elapsed_days,
  .nw-addform .bottle_formedit_3 p.elapsed_days,.nw-addform .bottle_formedit_oth p.elapsed_days{margin:0;justify-self:start;}
  .nw-addform .list_b_var .list_b_del,.nw-addform .bottle_form_oth .list_b_del{margin:0;justify-self:start;}
  /* 友人・知人は1枠1行。フィールドは260px基準(小画面では縮む)で「×」がすぐ右横に付く */
  .nw-addform .nw-fri-row>.add-clear-span,
  .nw-addform .nw-fri-row>.form-control.customer_tbl_3{flex:0 1 260px;}
  /* 担当者: 入力欄+選択(▼)を1行に収める */
  .nw-addform .nw-inline-form{flex-wrap:nowrap;}
  .nw-addform .nw-inline-form .form-control{flex:1 1 auto;min-width:0;max-width:none;}
}
@media screen and (max-width:380px){
  .sps_none{display:none!important;}   /* 極小幅で隠す(v1互換) */
  .pc_clear{clear:none;}               /* v1互換: 友人・知人は2個ごとの折返しに切替 */
  .sp_clear{clear:both;}
}
table.nw-list tbody td{word-break:break-word;} /* 長文はスクロールでなく折返しで収める */

@media (max-width:640px){
  .nw-search .nw-detail-row{align-items:stretch;flex-direction:column;}
  .sp_fontsize{font-size:80%;}
  .sepa{font-size:80%;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}