/* ===========================================================
   mylity Partners（旧CastOps）ユニバーサルデザイン スタイル
   - 文字: UDフォント優先 / 基準17px / 利用者が3段階で拡大できる
   - 色  : 本文コントラスト比 7:1 以上、UI境界 3:1 以上（WCAG 2.1 AA〜AAA）
           状態は必ず「色＋文字（＋記号）」で示し、色だけに依存しない
   - 余白: 操作要素は最小44×44px、行間1.8
   =========================================================== */

/* --- 文字サイズ: 利用者が切替可能（ud.js が html の font-size を書き換える） --- */
html { font-size: 106.25%; }            /* = 17px */
html[data-fs="l"]  { font-size: 118.75%; }  /* = 19px */
html[data-fs="xl"] { font-size: 131.25%; }  /* = 21px */

/* --- hidden属性は必ず効かせる ---
   label.f / label.cb など display を指定した要素は、指定しないと
   ブラウザ既定の [hidden]{display:none} を上書きしてしまい隠れない。 */
[hidden] { display: none !important; }

:root{
  /* 背景・前景 */
  --bg:#f2f5f8;
  --panel:#ffffff;
  --ink:#15181e;          /* 本文: 白背景に対し 16.9:1 */
  --muted:#4b5563;        /* 補足: 白背景に対し  7.6:1 */
  --line:#c3cad4;         /* 境界: 白背景に対し  2.9:1（非文字コントラスト3:1相当） */
  --line-strong:#98a3b3;

  /* ブランド・リンク */
  --brand:#0d5346;        /* 白文字で 10.4:1 */
  --brand-ink:#ffffff;
  --accent:#0a5a9c;       /* 白背景のリンクで 6.9:1 */
  --focus:#0a5a9c;

  /* 状態色（必ず文字ラベルと併用する） */
  --ok:#14532d;      --ok-bg:#d3f2e0;      --ok-line:#2f7d51;
  --warn:#7a4405;    --warn-bg:#fbeecd;    --warn-line:#a9700f;
  --danger:#98181b;  --danger-bg:#fbdedd;  --danger-line:#c0332f;
  --info:#0b4a6f;    --info-bg:#d8eefc;    --info-line:#2b7aa8;

  --radius:.625rem;
  --shadow:0 1px 2px rgba(16,24,40,.08),0 .25rem .875rem rgba(16,24,40,.06);

  /* 余白スケール */
  --sp1:.375rem; --sp2:.625rem; --sp3:.875rem; --sp4:1.25rem; --sp5:1.75rem;
  --tap:2.75rem;   /* 最小タップ領域 = 44px 相当 */
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#12161d; --panel:#1b212b;
    --ink:#f1f4f9;          /* パネル上で 15.2:1 */
    --muted:#b6c0cf;        /* パネル上で  8.4:1 */
    --line:#3b4553; --line-strong:#5b6879;
    --brand:#17795f; --brand-ink:#ffffff;   /* 白文字で 5.2:1 */
    --accent:#7cbcf7; --focus:#7cbcf7;
    --ok:#8ee9b4;      --ok-bg:#0f3220;      --ok-line:#3f9c69;
    --warn:#ffd473;    --warn-bg:#3b2e0c;    --warn-line:#a6801f;
    --danger:#ffaead;  --danger-bg:#42191a;  --danger-line:#b8544f;
    --info:#a3daf9;    --info-bg:#0b2c41;    --info-line:#3f83a8;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 .375rem 1.125rem rgba(0,0,0,.4);
  }
}

/* コントラスト強調を希望する利用者向け */
@media (prefers-contrast: more){
  :root{ --line:var(--line-strong); --muted:var(--ink); }
  .card,.kpi,.col,.cardlet,details.sec{ border-width:2px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:var(--bg);
  color:var(--ink);
  font-size:1rem;
  line-height:1.8;
  /* Noto Sans JP（Google Fonts）を全端末で共通に使う。
     端末ごとのフォント差でレイアウトや読みやすさが変わるのを防ぐ */
  font-family:"Noto Sans JP","BIZ UDPGothic",-apple-system,BlinkMacSystemFont,
              "Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  font-feature-settings:"palt" 0;   /* 詰め組みを無効化＝字間を均一に保つ */
  letter-spacing:.01em;
  font-optical-sizing:auto;
  -webkit-text-size-adjust:100%;
  overflow-wrap:anywhere;
}

a{ color:var(--accent); text-underline-offset:.2em; }
a:hover{ text-decoration-thickness:2px; }

h1,h2,h3{ margin:0 0 .5em; line-height:1.5; font-weight:700; letter-spacing:normal; }
h1{ font-size:1.375rem; }
h2{ font-size:1.125rem; }
h3{ font-size:1rem; }
p{ margin:.5em 0; }

/* --------------------------- アイコン（icons.js） --------------------------- */
/* 見出し・ナビの絵文字を廃止し、線画SVGに統一する。文字色にそのまま馴染むよう currentColor で塗る */
.icon{ flex:0 0 auto; vertical-align:-.15em; }
.icon-brand{ color:var(--brand); }
h1 .icon,h2 .icon,h3 .icon,summary .icon{ vertical-align:-.2em; margin-right:.05em; }
nav.tabs button .icon,.m-item .icon,.p-tab .icon{ vertical-align:-.2em; }

.muted{ color:var(--muted); }
.small{ font-size:.875rem; line-height:1.7; }   /* 14.9px 相当。これ以上は小さくしない */
.mono{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.right{ text-align:right; } .center{ text-align:center; } .nowrap{ white-space:nowrap; }
.row{ display:flex; gap:var(--sp2); align-items:center; flex-wrap:wrap; }
.row.tight{ gap:var(--sp1); }
.spacer{ flex:1; }
.hide{ display:none !important; }

/* キーボード操作の現在地を必ず見せる */
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* スクリーンリーダー専用テキスト */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------- レイアウト --------------------------- */
header.top{
  position:sticky; top:0; z-index:50;
  background:var(--panel); border-bottom:2px solid var(--line);
  padding:var(--sp2) var(--sp4);
  display:flex; gap:var(--sp1); align-items:center; flex-wrap:wrap;
}
header.top .brand{ font-weight:800; display:flex; gap:.4em; align-items:center; font-size:1.0625rem; flex:0 0 auto; }
header.top .brand b{ color:var(--brand); }
@media (prefers-color-scheme: dark){ header.top .brand b{ color:var(--ok); } }
/* 案件セレクタ・組織名/氏名は幅の狭い画面（≥1280px）でも1行に収まるよう、
   はみ出す分は省略記号にする（title属性で全文はホバーで見せる） */
header.top #projSel{ max-width:8.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
header.top #who{
  max-width:7rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:0 1 auto;
}

/* タブは幅が足りない画面では横スクロールにして、ヘッダー全体が2段に
   崩れる（＝ログアウト等が次の行へ押し出される）のを防ぐ */
nav.tabs{
  display:flex; gap:.25rem; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  flex:1 1 0%; min-width:0; scrollbar-width:thin;
}
/* nav.tabs が伸びられるだけ伸びられるよう、右側の余白用スペーサーには
   広がる優先度を渡さない（渡すとタブより先に空白側が伸びてしまう） */
header.top > .spacer{ flex:0 0 auto; }
nav.tabs button{
  border:2px solid transparent; background:transparent; color:var(--ink);
  padding:.5rem .4rem; border-radius:.5rem; flex:0 0 auto;
  font-size:.75rem; font-weight:700; cursor:pointer; min-height:var(--tap);
  display:inline-flex; align-items:center; gap:.3em; white-space:nowrap;
}
nav.tabs button:hover{ background:var(--info-bg); }
nav.tabs button.on{ background:var(--brand); color:var(--brand-ink); }

main{ padding:var(--sp4); max-width:96rem; margin:0 auto; }
.wrap{ max-width:56rem; margin:0 auto; padding:var(--sp4); }

/* --------------------------- パーツ --------------------------- */
.card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--sp4); box-shadow:var(--shadow);
}
.card + .card{ margin-top:var(--sp3); }
/* .card+.card は縦積み用。.grid の中で横に並ぶカード同士には効かせない
   （効かせると2つ目のカードだけ下にずれ、行の上端が揃わなくなる） */
.grid > .card + .card{ margin-top:0; }
.grid{ display:grid; gap:var(--sp3); }
.g2{ grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.g3{ grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.g4{ grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); }

.kpi{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--sp3) var(--sp4);
}
.kpi .l{ font-size:.875rem; color:var(--muted); font-weight:700; }
.kpi .v{ font-size:1.75rem; font-weight:800; letter-spacing:normal; font-variant-numeric:tabular-nums; margin:.15em 0; line-height:1.3; }
.kpi .s{ font-size:.875rem; color:var(--muted); line-height:1.6; }

button,.btn{
  font:inherit; font-size:.9375rem; font-weight:700;
  border:2px solid var(--line-strong); background:var(--panel); color:var(--ink);
  padding:.5rem 1rem; border-radius:.5rem; cursor:pointer; text-decoration:none;
  display:inline-flex; gap:.4em; align-items:center; justify-content:center;
  min-height:var(--tap); line-height:1.4;
}
button:hover,.btn:hover{ background:var(--info-bg); border-color:var(--accent); }
button:disabled{ opacity:.55; cursor:not-allowed; }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.btn-primary:hover{ background:var(--brand); filter:brightness(1.15); }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-sm{ padding:.3rem .7rem; font-size:.875rem; border-radius:.4375rem; min-height:2.375rem; }
.btn-lg{ padding:.875rem 1.5rem; font-size:1.0625rem; width:100%; min-height:3.25rem; }

input,select,textarea{
  font:inherit; font-size:1rem; width:100%;
  padding:.625rem .75rem; min-height:var(--tap);
  border:2px solid var(--line-strong); border-radius:.5rem;
  background:var(--panel); color:var(--ink);
  min-width:0;   /* flex/grid の中で内容量に押し広げられて枠から飛び出すのを防ぐ */
}
/* 横並び（.row）の中の入力欄は、幅100%のままだと行からはみ出すので伸縮させる */
.row > input,.row > select,.row > textarea{ width:auto; flex:1 1 10rem; }
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:1; }
input:focus,select:focus,textarea:focus{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
/* 他の人の更新と衝突したあと、入力中（未保存）の欄に付ける目印 */
input.changed,select.changed,textarea.changed{ background:var(--warn-bg); border-color:var(--warn-line); }
label.cb.changed{ background:var(--warn-bg); border-radius:.375rem; }
textarea{ min-height:7rem; resize:vertical; line-height:1.75; }
input[type=checkbox]{ min-height:0; }

label.f{ display:block; margin-bottom:var(--sp3); }
label.f > span{
  display:block; font-size:.9375rem; font-weight:700;
  color:var(--ink); margin-bottom:.25rem;   /* 入力名は薄くしない */
}
label.cb{
  display:flex; gap:.625rem; align-items:flex-start;
  font-size:1rem; margin-bottom:.5rem; cursor:pointer;
  padding:.375rem 0; min-height:var(--tap);
}
label.cb input{ width:1.5rem; height:1.5rem; flex:0 0 auto; margin-top:.2em; accent-color:var(--brand); }
/* 文は1つの塊として折り返す（<b> や注記が混ざっても1文字幅の列に割れないように） */
label.cb > span{ flex:1 1 auto; min-width:0; line-height:1.75; }

table{ width:100%; border-collapse:collapse; font-size:.9375rem; }
th,td{ padding:.625rem .625rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.65; }
th{ font-size:.875rem; color:var(--ink); font-weight:700; white-space:nowrap; position:sticky; top:0; background:var(--panel); border-bottom:2px solid var(--line-strong); }
tbody tr:hover{ background:var(--info-bg); }
.scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* 列数の多い表は width:100% のままだと縮んで1文字ずつ折り返してしまう。
   かといって width:max-content にすると備考欄など自由記述の長いセルが
   1行に伸びきってしまうので、各セルに最低幅だけ確保して極端な折り返しを防ぐ。
   収まらない分は .scroll の横スクロールに任せる */
.scroll th,.scroll td{ min-width:4.5em; }

/* 状態表示: 色 + 文字ラベル + 枠線の太さで三重に区別する */
.tag{
  display:inline-block; padding:.15rem .625rem; border-radius:1rem;
  font-size:.875rem; font-weight:700; line-height:1.6;
  border:2px solid var(--line); white-space:nowrap;
}
.t-ok{     background:var(--ok-bg);     color:var(--ok);     border-color:var(--ok-line); }
.t-warn{   background:var(--warn-bg);   color:var(--warn);   border-color:var(--warn-line); border-style:dashed; }
.t-danger{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); border-width:3px; }
.t-info{   background:var(--info-bg);   color:var(--info);   border-color:var(--info-line); }

.note{ padding:var(--sp3) var(--sp4); border-radius:.5rem; font-size:.9375rem; line-height:1.75;
  background:var(--info-bg); color:var(--info); border:1px solid var(--info-line); }
.note.warn{   background:var(--warn-bg);   color:var(--warn);   border-color:var(--warn-line); }
.note.danger{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); border-width:2px; }
.note.ok{     background:var(--ok-bg);     color:var(--ok);     border-color:var(--ok-line); }

/* --------------------------- カンバン --------------------------- */
/* 列幅を絞って、1440px幅でも後工程の列までできるだけ見えるようにする */
.board{ max-width:100%; display:flex; gap:var(--sp2); overflow-x:auto; padding-bottom:var(--sp2); align-items:stretch; }
.col{ flex:0 0 13rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp2); }
.col h3{ font-size:.875rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:.5em; margin-bottom:var(--sp2); padding:0 .25rem; }
.cardlet{
  border:2px solid var(--line); border-radius:.5rem;
  padding:.625rem .75rem; margin-bottom:var(--sp2); cursor:pointer; background:var(--bg);
}
.cardlet:hover,.cardlet:focus-within{ border-color:var(--accent); }
.cardlet .c1{ font-size:.875rem; color:var(--muted); font-weight:700; }
.cardlet .c2{ font-size:1rem; font-weight:700; margin:.1em 0 .3em; line-height:1.5; }

/* 「枠のみ（未アサイン）」の畳んだ状態。件数バッジ付きの縦書きボタン1つだけの細い列にする */
.col-collapsed{ flex:0 0 2.75rem; padding:0; display:flex; }
.col-collapsed > button{
  flex:1 1 auto; width:100%; border:none; background:transparent; border-radius:var(--radius);
  writing-mode:vertical-rl; text-orientation:mixed; font-size:.8125rem; font-weight:700; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:.4em; cursor:pointer; min-height:12rem;
}
.col-collapsed > button:hover{ background:var(--info-bg); }

/* --------------------------- ドロワー --------------------------- */
.drawer-bg{ position:fixed; inset:0; background:rgba(8,12,18,.55); z-index:80; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(48rem,100%);
  background:var(--bg); z-index:81; overflow-y:auto;
  box-shadow:-.5rem 0 2rem rgba(0,0,0,.28);
}
.drawer .dhead{ position:sticky; top:0; background:var(--panel); border-bottom:2px solid var(--line); padding:var(--sp3) var(--sp4); z-index:2; }
.drawer .dbody{ padding:var(--sp4) var(--sp4) 4rem; }

/* ドロワー上部のショートカットバッジからのジャンプ先。sticky な .dhead に見出しが隠れないよう余白を確保 */
.drawer details.sec{ scroll-margin-top:11rem; }
details.sec{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--sp3); }
details.sec > summary{
  padding:var(--sp3) var(--sp4); font-weight:700; cursor:pointer; list-style:none;
  display:flex; gap:.5em; align-items:center; min-height:var(--tap); font-size:1rem;
}
details.sec > summary::-webkit-details-marker{ display:none; }
details.sec > summary::before{ content:'▶'; color:var(--muted); font-size:.75em; }
details.sec[open] > summary::before{ content:'▼'; }
details.sec > .in{ padding:0 var(--sp4) var(--sp4); }

/* 日程候補・行程表の入力行。折り返しで組むので画面幅に関係なく枠内に収まる */
.drow,.irow{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin-bottom:.5rem; padding:.5rem; border:1px solid var(--line); border-radius:.5rem;
}
.drow > *,.irow > *{ min-width:0; }
.d-date{ flex:0 1 10rem; }
.d-memo{ flex:1 1 11rem; }
.d-ans{ flex:0 0 auto; min-width:4rem; text-align:center; }
.i-day{ flex:0 0 4rem; }
.i-time{ flex:0 0 5.5rem; }
.i-title{ flex:3 1 12rem; }
.i-place{ flex:2 1 8rem; }
.i-note{ flex:2 1 8rem; }
.i-del{ flex:0 0 auto; color:var(--danger); }

/* 幅の広い表をスマホではカード状に積む（data-l がラベルになる） */
@media (max-width:46rem){
  table.cards,table.cards tbody,table.cards tr,table.cards td{ display:block; width:100%; }
  table.cards thead{ display:none; }
  table.cards tr{
    border:1px solid var(--line-strong); border-radius:.625rem;
    padding:.5rem .75rem; margin-bottom:.625rem; background:var(--panel);
  }
  /* ラベルは値の上に置く。横並びにするとセル内に複数要素がある行が潰れる */
  table.cards td{ border:0; padding:.25rem 0; }
  table.cards td + td{ border-top:1px solid var(--line); padding-top:.4rem; margin-top:.4rem; }
  table.cards td::before{
    content:attr(data-l); display:block; font-size:.75rem; font-weight:700;
    color:var(--muted); line-height:1.5;
  }
  table.cards td[data-l=""]::before,table.cards td:not([data-l])::before{ content:none; border:0; }
  table.cards td.right{ text-align:left; }
}

/* --------------------------- ハンバーガーメニュー --------------------------- */
/* スマホのみ表示。下部タブと併用し、上からでも切り替えられるようにする */
.menu-btn{ display:none; }
.menu-panel{ display:none; }
.menu-bg{ display:none; }

@media (max-width:46rem){
  .menu-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.75rem; min-width:2.75rem; height:2.75rem; padding:0;
    font-size:1.25rem; border-radius:.5rem; flex:0 0 auto;
  }
  .menu-bg{ display:block; position:fixed; inset:0; background:rgba(8,12,20,.5); z-index:90; }
  .menu-panel{
    display:flex; flex-direction:column; gap:.25rem;
    position:fixed; top:0; left:0; bottom:0; width:min(17rem,86vw); z-index:91;
    background:var(--panel); border-right:2px solid var(--line);
    padding:var(--sp3); overflow-y:auto; box-shadow:.5rem 0 1.5rem rgba(0,0,0,.25);
  }
  .menu-panel h2{ font-size:1rem; margin:0 0 .5rem; }
  .menu-panel .m-item{
    display:flex; align-items:center; gap:.625rem; width:100%;
    padding:.75rem; border:2px solid var(--line); border-radius:.5rem;
    background:var(--panel); color:var(--ink); font-size:1rem; font-weight:700;
    text-align:left; justify-content:flex-start; min-height:var(--tap);
  }
  .menu-panel .m-item[aria-current="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
  .menu-panel .m-item .badge{
    margin-left:auto; font-size:.75rem; padding:0 .5rem; border-radius:1rem;
    background:var(--line); color:var(--ink);
  }
  .menu-panel .m-item[aria-current="true"] .badge{ background:rgba(255,255,255,.25); color:#fff; }
  .menu-panel .m-sep{ border:0; border-top:1px solid var(--line); margin:.5rem 0; }
}

.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:1.5rem; z-index:200;
  background:#15181e; color:#fff; padding:.75rem 1.25rem; border-radius:.5rem;
  font-size:1rem; font-weight:700; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.35);
  border:2px solid #fff; max-width:calc(100vw - 2rem);
}
.toast.err{ background:#7d1114; }

/* --------------------------- 文字サイズ切替 --------------------------- */
.udscale{ display:inline-flex; align-items:center; gap:.25rem; }
.udscale .lbl{ font-size:.875rem; font-weight:700; color:var(--muted); }
.udscale button{ min-height:2.375rem; min-width:2.375rem; padding:.25rem .5rem; font-size:.875rem; }
.udscale button[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
/* 文字サイズ切替はページ末尾のフッターに置く（本文の邪魔をしない位置） */
.udbar{
  background:var(--panel); border-top:2px solid var(--line);
  padding:.75rem var(--sp4); margin-top:var(--sp5);
  display:flex; justify-content:center; align-items:center; gap:var(--sp3); flex-wrap:wrap;
}
.udbar .note-txt{ font-size:.8125rem; color:var(--muted); }

/* --------------------------- 本人ポータル --------------------------- */
.p-hero{ background:var(--brand); color:#fff; padding:var(--sp5) var(--sp4); position:relative; }
.p-hero h1{ font-size:1.25rem; margin:0; color:#fff; }
.p-hero .s{ font-size:.9375rem; line-height:1.7; color:#eaf3f0; }

.p-greet{ color:#eaf3f0; font-size:1rem; line-height:1.75; margin:.5rem 0 .75rem; }
.p-facts{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; font-size:.9375rem; color:#eaf3f0; margin-top:.25rem; }
.p-sibs{ margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.375rem; align-items:center; color:#eaf3f0; }
.p-sib{
  display:inline-block; padding:.25rem .625rem; border-radius:1rem; font-size:.8125rem; font-weight:700;
  background:rgba(255,255,255,.18); color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.45);
}
.p-sib:hover{ background:rgba(255,255,255,.3); color:#fff; }
button.p-sib{ min-height:0; cursor:pointer; font-family:inherit; }
.p-support{ background:var(--info-bg); border-color:var(--info-line); margin-top:var(--sp4); }
.p-help{ margin-top:var(--sp4); scroll-margin-top:var(--sp4); }
.p-faq{ border-top:1px solid var(--line); }
.p-faq > summary{ cursor:pointer; padding:.75rem 0; font-weight:700; list-style:none; display:flex; gap:.5rem; }
.p-faq > summary::-webkit-details-marker{ display:none; }
.p-faq > summary::before{ content:'＋'; color:var(--muted); }
.p-faq[open] > summary::before{ content:'－'; }
.p-faq > .a{ padding:0 0 .75rem 1.5rem; font-size:.9375rem; line-height:1.7; }
.p-faq > .a p{ margin:0 0 .5rem; }
.p-faq > .a ul{ margin:0; padding-left:1.25rem; }
.btn-line{ background:#06C755; border-color:#05a648; color:#fff; }
.btn-line:hover{ background:#05b34c; border-color:#05a648; color:#fff; }
.p-support h3{ color:var(--info); }

/* --- タブ：やることを4つに分け、状態をタブ自体に出す --- */
.p-tabs{
  display:flex; gap:.25rem; background:var(--panel);
  border-bottom:2px solid var(--line); padding:.375rem .5rem;
  position:sticky; top:0; z-index:30; overflow-x:auto; scrollbar-width:none;
}
.p-tabs::-webkit-scrollbar{ display:none; }
.p-tab{
  flex:1 1 0; min-width:5rem; border:2px solid transparent; background:transparent;
  border-radius:.5rem; padding:.5rem .25rem; cursor:pointer; min-height:3.75rem;
  display:flex; flex-direction:column; align-items:center; gap:.125rem;
  font-size:.8125rem; font-weight:700; color:var(--muted); line-height:1.3;
}
.p-tab .ic{ font-size:1.25rem; line-height:1; }
.p-tab .lb{ white-space:nowrap; }
.p-tab .badge{
  font-size:.6875rem; font-weight:700; padding:0 .375rem; border-radius:1rem;
  background:var(--line); color:var(--ink); min-width:1.75rem; text-align:center;
}
.p-tab.done .badge{ background:var(--ok-bg); color:var(--ok); }
.p-tab[aria-selected="true"]{ background:var(--brand); color:#fff; }
.p-tab[aria-selected="true"] .badge{ background:rgba(255,255,255,.25); color:#fff; }
.p-tab:hover{ background:var(--info-bg); color:var(--ink); }
.p-tab[aria-selected="true"]:hover{ background:var(--brand); color:#fff; }

/* --- 次にやること --- */
.p-next{
  display:flex; align-items:center; gap:.5rem; margin-bottom:var(--sp3);
  padding:.875rem 1rem; border-radius:.625rem; font-weight:700; line-height:1.6;
  background:var(--warn-bg); color:var(--warn); border:2px solid var(--warn-line); cursor:pointer;
}
.p-next.ok{ background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line); cursor:default; }
.p-next.ng{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger-line); }
.p-next .arrow{ margin-left:auto; font-size:1.25rem; }

/* --- 日程の選択 --- */
.date-row{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between;
  padding:.75rem; border:2px solid var(--line); border-radius:.625rem; margin-bottom:.5rem;
}
.date-row.answered{ border-color:var(--ok-line); background:var(--ok-bg); }
.date-row .d-label{ font-size:1.0625rem; }
.choice{
  min-width:3.25rem; min-height:2.75rem; font-size:1.125rem; font-weight:700;
  border:2px solid var(--line-strong); background:var(--panel); border-radius:.5rem; cursor:pointer;
}
.choice.on{ background:var(--brand); border-color:var(--brand); color:#fff; }
.big-date{ font-size:1.5rem; font-weight:800; margin:.25rem 0; }

.exp-item{ display:flex; gap:var(--sp3); align-items:center; padding:var(--sp3) 0; border-bottom:1px solid var(--line); }
.exp-item img{ width:3.5rem; height:3.5rem; object-fit:cover; border-radius:.5rem; border:1px solid var(--line-strong); flex:0 0 auto; }
.thumb{
  width:3.5rem; height:3.5rem; border-radius:.5rem; border:2px dashed var(--line-strong);
  display:grid; place-items:center; color:var(--muted); font-size:.75rem; flex:0 0 auto; text-align:center;
}

/* ===========================================================
   本人ポータル（インフルエンサー向け）：余白を広く・1画面1つのことに集中できるように
   管理画面には効かせない（body.portal の中だけ）
   =========================================================== */
body.portal .wrap{ max-width:36rem; padding:var(--sp5) var(--sp4) var(--sp5); }
body.portal .card{ padding:var(--sp5) var(--sp4); border-radius:1rem; }
body.portal .card + .card{ margin-top:var(--sp4); }
body.portal .card h2{ margin:0 0 var(--sp3); line-height:1.5; }
body.portal .card h3{ margin:var(--sp4) 0 var(--sp2); }
body.portal .card p{ line-height:1.85; }
body.portal .card p + p{ margin-top:var(--sp2); }
body.portal label.f{ margin-bottom:var(--sp4); }
body.portal .note{ padding:var(--sp4); border-radius:.75rem; }
body.portal .note label.cb + label.cb{ margin-top:var(--sp2); }
body.portal .btn-lg{ margin-top:var(--sp4); border-radius:.75rem; }
body.portal .p-hero{ padding-bottom:calc(var(--sp5) + .25rem); }
body.portal .p-hero > :not(.p-menu-btn){ max-width:36rem; margin-left:auto; margin-right:auto; }
body.portal .p-hero h1{ font-size:1.375rem; margin-top:.25rem; }
body.portal .p-greet{ margin:.75rem auto 1rem; }
body.portal .p-facts{ gap:.5rem 1.25rem; }
body.portal .p-next{ margin-bottom:var(--sp4); padding:1rem 1.125rem; border-radius:.875rem; }
body.portal .date-row{ padding:1rem; margin-bottom:var(--sp2); border-radius:.875rem; }

/* 連絡先：どれを選んでも同じ担当に届く。押せる範囲を大きく、間をあけて並べる */
.p-support-lead{ margin:0 0 var(--sp4); line-height:1.85; }
.p-contacts{ display:flex; flex-direction:column; gap:var(--sp3); }
.p-contact{
  display:flex; align-items:center; gap:.875rem; padding:1rem 1.125rem; min-height:4rem;
  border:2px solid var(--line-strong); border-radius:.875rem; background:var(--panel);
  color:var(--ink); text-decoration:none;
}
a.p-contact:hover{ border-color:var(--accent); background:var(--info-bg); color:var(--ink); }
.p-contact .pc-ic{ flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:.75rem; display:grid; place-items:center; color:#fff; }
.p-contact .pc-ic .icon{ width:1.375rem; height:1.375rem; }
.p-contact .pc-tx{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.125rem; }
.p-contact .pc-tx b{ font-size:1.0625rem; line-height:1.4; }
.p-contact .pc-tx span{ font-size:.875rem; color:var(--muted); line-height:1.6; overflow-wrap:anywhere; }
.p-contact .pc-go{ flex:0 0 auto; font-size:1.25rem; color:var(--muted); }
.p-contact.is-note{ border-style:dashed; }
.c-ig .pc-ic{ background:#c13584; }
.c-line .pc-ic{ background:#06C755; }
.c-mail .pc-ic{ background:var(--brand); }
.p-hours{ margin:var(--sp3) 0 0; }
.menu-panel .m-note{ cursor:default; font-weight:700; }

/* --------------------------- スマホ --------------------------- */
@media (max-width:46rem){
  main{ padding:var(--sp2); }
  .wrap{ padding:var(--sp3); }
  .kpi .v{ font-size:1.5rem; }
  table{ font-size:.875rem; }
  th,td{ padding:.5rem .375rem; }
  .drawer .dbody{ padding:var(--sp3) var(--sp3) 4rem; }
  details.sec > .in{ padding:0 var(--sp3) var(--sp3); }
  details.sec > summary{ padding:var(--sp3); }

  /* 指標は2列に。1列だと1画面に1枚しか入らず全体が掴めない */
  .g4,.g3{ grid-template-columns:repeat(2,1fr); }
  .kpi{ padding:.625rem .75rem; }
  .kpi .v{ font-size:1.375rem; }
  .kpi .l,.kpi .s{ font-size:.75rem; }

  /* ヘッダーを2段に固定し、タブは横スクロールで1行に収める */
  header.top{ padding:.5rem .625rem; gap:.5rem; }
  header.top .brand{ font-size:1rem; }
  header.top #projSel{ flex:1 1 6rem; max-width:none; min-height:2.5rem; }
  header.top #who{ display:none; }        /* 氏名は設定画面で確認できる */
  header.top #logout{ padding:.25rem .5rem; font-size:.8125rem; min-height:2.25rem; }
  .udscale button{ min-height:2.25rem; min-width:2.25rem; padding:.2rem .4rem; }
  nav.tabs{
    order:9; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:.25rem;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  nav.tabs::-webkit-scrollbar{ display:none; }
  nav.tabs button{ flex:0 0 auto; padding:.4rem .625rem; font-size:.875rem; min-height:2.5rem; }
  .udscale .lbl{ display:none; }

  /* スマホではタブを下端に固定してアプリのように親指で切り替えられるようにする */
  .p-tabs{
    position:fixed; left:0; right:0; bottom:0; top:auto; padding:.25rem .375rem;
    border-top:2px solid var(--line-strong); border-bottom:0;
    box-shadow:0 -.25rem .75rem rgba(0,0,0,.14);
    padding-bottom:calc(.25rem + env(safe-area-inset-bottom));
  }
  body.portal{ padding-bottom:6rem; }
  body.portal .udbar{ margin-bottom:.5rem; }
  .p-tab{ min-width:0; padding:.375rem .125rem; min-height:3.25rem; font-size:.75rem; }
  .p-hero{ padding-top:3.75rem; }         /* 左上のメニューボタンと重ならないように */
  .p-menu-btn{ position:absolute; top:.625rem; left:.625rem; z-index:20;
    background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); color:#fff; }
  .p-menu-btn:hover{ background:rgba(255,255,255,.28); color:#fff; }
  .p-tab .ic{ font-size:1.125rem; }

  .board{ gap:.5rem; }
  .col{ flex:0 0 15rem; }
  .drawer .dhead{ padding:.625rem .75rem; }
  /* モーダルは下から出す形にして、指の届く位置にボタンを置く */
  .modal-sheet{ top:auto !important; max-height:92vh !important; border-radius:1rem 1rem 0 0 !important; }
}

/* 印刷（市への報告書をそのまま出せるように） */
@media print{
  header.top,nav.tabs,.udbar,.udscale,button,.btn{ display:none !important; }
  body{ background:#fff; color:#000; }
  .card,.kpi{ border:1px solid #888; box-shadow:none; break-inside:avoid; }
}