/* 営業アナリスト 澪 — 画面スタイル（仕様書 第4章） */
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --navy:#0f2a4a; --navy2:#163c66; --navy-d:#0a1c33;
  --gold:#c8a24a; --gold-l:#e3c987; --gold-d:#b8912f;
  --ink:#17212e; --muted:#6b7684; --line:#e3e7ec; --paper:#fff; --bg:#f4f6f9;
  --ok:#1f6b4d; --ok-bg:#e8f3ee; --wait:#8a6416; --wait-bg:#fdf3e0; --danger:#b42318;
  /* --muted は「箱の中の薄い注意書き」用。読ませる文字にはこちらを使う。
     白地とのコントラストは 4.7:1 → 7.9:1（2026-09-08 太田さんの指摘で追加） */
  --read:#4a5a6d;
  --sidebar:280px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans",sans-serif;
  font-size:15px; line-height:1.7;
}
a{color:var(--navy2)}

/* ボタンの共通見た目。これが無く、案件画面のボタンがブラウザの既定のままだった（2026-09-07 修正）。
   ログイン画面の .login-btn と、金色の .newcase summary は、この後で個別に上書きする */
button,.button{font:inherit;font-size:13.5px;font-weight:700;line-height:1.4;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:9px;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  text-decoration:none;transition:background .12s,border-color .12s}
button:hover,.button:hover{background:#f2f6fa;border-color:#cfd8e2}
button:disabled{opacity:.5;cursor:default}
.btn-navy{background:linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);border-color:transparent;
  color:#fff;box-shadow:0 3px 10px rgba(15,42,74,.18)}
.btn-navy:hover{background:linear-gradient(180deg,#1d4a7d 0%,#12314f 100%);border-color:transparent}
.secondary{background:var(--paper);color:var(--navy2);border-color:#cfd8e2}
.secondary:hover{background:#eef2f7}
/* 入力欄の共通の見た目。これが無く、日時や貼り付け欄がブラウザの既定のまま
   （角ばった灰色の枠）だった。ボタンと同じ理由で後から足している（2026-09-08）。
   ログイン画面の .input-wrap input は、この後で個別に上書きしている */
input:not([type]),input[type=text],input[type=password],input[type=email],
input[type=search],input[type=number],input[type=tel],input[type=url],
input[type=date],input[type=time],input[type=datetime-local],select,textarea{
  font:inherit;font-size:14px;color:var(--ink);width:100%;
  padding:11px 13px;border:1px solid #dfe4ea;border-radius:10px;background:#fbfcfd;
  transition:border-color .12s,background .12s,box-shadow .12s}
input:not([type]):focus,input[type=text]:focus,input[type=password]:focus,
input[type=email]:focus,input[type=search]:focus,input[type=number]:focus,
input[type=tel]:focus,input[type=url]:focus,input[type=date]:focus,
input[type=time]:focus,input[type=datetime-local]:focus,select:focus,textarea:focus{
  outline:none;border-color:#7fa8d8;background:#fff;box-shadow:0 0 0 3px rgba(47,111,189,.10)}
::placeholder{color:#96a3b2}

.hand{font-family:"Klee One","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif}
.marker{background:linear-gradient(transparent 62%, var(--gold-l) 62%)}

/* ============ ログイン ============ */
/* 背景は1枚の合成画像（login_hero.png / 1915x821）。
   ログインカードは、その画像内のカード位置（左68.4% 上6.9% 下98.3%）にぴったり重ねる。 */
.login-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:26px;background:linear-gradient(160deg,#eef3f9 0%,#e7edf5 100%)}
.login-frame{position:relative;width:min(1400px,100%);aspect-ratio:1923/818;overflow:hidden;border-radius:22px;
  background:#fff url('img/login_hero.png') no-repeat center/cover;
  box-shadow:0 24px 70px rgba(15,42,74,.18);container-type:inline-size}

/* 画像から消した文字を、同じ位置・同じ大きさでHTMLで描く（座標は合成画像の実測値） */
.hero-lead{position:absolute;left:2.81%;top:53.5%;margin:0;z-index:2;white-space:nowrap;
  font-size:1.362cqw;line-height:1.622;font-weight:500;letter-spacing:.005em;color:#14254a}
.feat{position:absolute;top:86.98%;transform:translateX(-50%);text-align:center;z-index:2;white-space:nowrap}
.feat b{display:block;font-size:1.205cqw;line-height:1.2;font-weight:700;color:#0b264d;letter-spacing:-.012em}
.feat span{display:block;font-size:.905cqw;line-height:1.2;color:#283c5d;letter-spacing:-.012em;margin-top:.78em}
.f1{left:6.92%} .f2{left:17.99%} .f3{left:29.43%}

.brand-mark{position:absolute;left:3.1%;top:5.6%;z-index:4}
.brand-mark img{width:14.3cqw;height:auto;display:block}

.login-card{position:absolute;left:68.49%;right:2.65%;top:4.34%;bottom:4.34%;background:#fff;border-radius:16px;
  padding:2.13% 2.55% 1.35%;display:flex;flex-direction:column;z-index:3;container-type:inline-size;
  box-shadow:0 10px 34px rgba(20,40,70,.12)}
.login-card h2{margin:0 0 .30em;font-size:7.59cqw;color:#15243a;letter-spacing:.01em;line-height:1.25}
.login-card .sub2{color:#5a6674;font-size:5.23cqw;line-height:1.5;margin:0 0 10.0%}
/* ラベルの既定。cqw はログインカードの中だけで使う（枠の外だと画面幅基準になり、
   案件画面で文字が巨大になる。2026-09-07 に実際に起きた） */
label.fld{display:block;font-size:13px;color:#33414f;margin-bottom:.5em;font-weight:600;line-height:1.6}
.login-card label.fld{font-size:4.49cqw;margin-bottom:.52em;line-height:1.3}
.input-wrap{position:relative;margin-bottom:6.3%}
.input-wrap .lead-ic{position:absolute;left:2.1%;top:50%;transform:translateY(-50%);width:3.5cqw;height:3.5cqw;pointer-events:none}
.input-wrap input{width:100%;padding:3.47% 3.6% 3.47% 8.3%;border:1px solid #dfe4ea;border-radius:1.6cqw;background:#fbfcfd;
  font:inherit;font-size:4.6cqw;line-height:1.5;color:var(--ink)}
.input-wrap input:focus{outline:none;border-color:#2f6fbd;background:#fff}
.eye{position:absolute;right:1.3%;top:50%;transform:translateY(-50%);background:none;border:none;padding:1.1%;cursor:pointer;line-height:0}
.eye svg{width:3.5cqw;height:3.5cqw}
.keep{display:flex;align-items:center;gap:1.5%;font-size:4.49cqw;line-height:1.3;color:#33414f;margin-bottom:6.3%}
.keep input{width:3.4cqw;height:3.4cqw;accent-color:#2f6fbd;flex:none}
.login-btn{width:100%;border:0;background:linear-gradient(180deg,#e0b862 0%,#cfa243 100%);color:#fff;font-weight:700;
  font-size:5.4cqw;line-height:1.2;padding:4.2% 3%;border-radius:1.9cqw;letter-spacing:.06em;
  text-shadow:0 1px 2px rgba(90,60,10,.35);
  box-shadow:0 4px 14px rgba(184,145,47,.3);display:flex;align-items:center;justify-content:center;gap:1.7%}
.forgot-link{display:block;text-align:center;margin-top:6.1%;font-size:3.42cqw;line-height:1.3;
  color:#2f6fbd;text-decoration:none}
.forgot-link:hover{text-decoration:underline}
.copy-sign{position:absolute;right:6.1%;bottom:3.9%;width:28.3%;height:auto;margin:0}

/* パスワード再設定の受付ページ（ログイン画面と同じ地色の上に、白いカード1枚） */
.simple-page{justify-content:center}
.simple-card{width:min(480px,100%);background:#fff;border-radius:18px;padding:34px 34px 26px;
  box-shadow:0 18px 50px rgba(15,42,74,.14);container-type:inline-size}
.simple-logo{display:block;width:170px;height:auto;margin-bottom:20px}
.simple-card h1{margin:0 0 10px;font-size:21px;color:#15243a;letter-spacing:.01em}
.simple-card p{margin:0 0 14px;font-size:14px;line-height:1.8;color:#3c4956}
.simple-card .note{font-size:12.5px;color:#7b8896}
.simple-card .fld{margin-top:6px;font-size:13px}
.simple-card .input-wrap{margin-bottom:16px}
.simple-card .input-wrap input{padding:12px 14px;font-size:15px;border-radius:9px}
.simple-card .login-btn{margin-top:4px;font-size:15.5px;padding:13px 14px;border-radius:10px;gap:8px}
.simple-card .back{display:inline-block;margin-top:16px;font-size:13px;color:#2f6fbd;text-decoration:none}
.simple-card .back:hover{text-decoration:underline}
.login-card .error{margin-bottom:12px;font-size:12.5px;padding:8px 11px}

.privacy{width:min(1400px,100%);margin:12px auto 0;font-size:11px;color:#7b8896;line-height:1.7;padding:0 6px}

@media(max-width:900px){
  .login-frame{aspect-ratio:auto;min-height:auto;background:none;box-shadow:none;display:grid;gap:16px}
  .login-frame::before{content:"";display:block;width:100%;aspect-ratio:1310/821;
    background:url('img/login_hero.png') no-repeat left center;background-size:146% auto}
  .brand-mark{position:static;padding:0 4px}
  .login-card{position:static;padding:26px 22px;border:1px solid var(--line);border-radius:16px;
    box-shadow:0 10px 30px rgba(15,42,74,.1)}
  .copy-sign{position:static;width:150px;margin:18px 0 0 auto;display:block}
}

/* ============ アプリ本体 ============ */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
/* 地の色は見本の実測値 #112b4b。グラデーションはかけない（下の風景で明るくなるため） */
/* サイドバーは画面に貼り付けたままにする。前は中身の高さぶん伸びていたので、
   下へスクロールすると一緒に上へ流れていた（2026-09-08 太田さんの指摘）。
   高さを画面ぴったりにして sticky を効かせ、入りきらない時だけ中で送る */
/* 下の余白は0。ここに余白があると、風景の下に紺色の帯が残る */
.side{background:#112b4b;color:#dbe6f2;padding:22px 0 0;align-self:start}
.side .mark{padding:0 22px 20px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.side .mark .n{font-size:17px;font-weight:700;color:#fff;letter-spacing:.02em}
.side .mark .r{font-size:11px;color:var(--gold-l);letter-spacing:.1em;margin-top:4px}
/* 間隔は0。項目そのものが54px高で、見本のメニューの間隔（約55px）とそろう */
.side nav{display:grid;gap:0;padding:0 13px}
/* 見本の実測: アイコンの左端 x30・文字の左端 x73・文字の大きさ約15.5px。
   13(nav) + 16(a) = 29 でアイコン左端、24(アイコン) + 19(間) で文字が x72 に来る */
.side nav a{display:flex;align-items:center;gap:19px;padding:14px 16px;border-radius:11px;color:#dbe6f3;text-decoration:none;font-size:15.5px}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:rgba(200,162,74,.16);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.side .sep{height:1px;background:rgba(255,255,255,.12);margin:22px 22px}
.side .ic{width:20px;text-align:center;font-size:15px}

.main{min-width:0;display:flex;flex-direction:column}
.head{background:var(--paper);border-bottom:1px solid var(--line);padding:12px 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.head .title{font-size:16px;font-weight:700}
.staff{display:flex;align-items:center;gap:11px}
.staff img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.staff .n{font-size:14px;font-weight:700;line-height:1.3}
.staff .r{font-size:11px;color:var(--muted)}
.staff .st{font-size:11px;color:var(--ok)}
.content{padding:22px 30px 60px;display:grid;gap:8px;max-width:1600px;width:100%;margin-inline:auto}

/* 挨拶バー: 背景に職場の写真、左は白でぼかして文字を読ませる */
.greet{position:relative;overflow:hidden;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;padding:20px 26px;display:flex;gap:20px;align-items:center;min-height:104px;
  background:var(--paper) url('img/greet_bg.png') no-repeat center/cover}
.greet::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,#fff 30%,rgba(255,255,255,.82) 46%,rgba(255,255,255,.34) 62%,rgba(255,255,255,.06) 100%)}
.greet > *{position:relative;z-index:1}
.greet .face{width:100px;height:100px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 3px #fff,0 4px 14px rgba(20,40,70,.18)}
.greet h1{font-size:22px;margin:0 0 6px;font-weight:700;letter-spacing:.01em}
.greet p{margin:0;color:#41505f;font-size:14px}
.greet .aside{margin-left:auto;width:min(300px,26%);height:auto;flex:none}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 17px;display:flex;gap:12px;align-items:center}
.stat .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:#eef2f7;flex:none}
.stat .ic.g{background:#faf3e2}.stat .ic.b{background:#eaf1fa}.stat .ic.p{background:#f0eef8}
.stat .k{font-size:13px;color:var(--read);letter-spacing:.02em}
.stat .v{font-size:24px;font-weight:700;color:var(--navy);line-height:1.25}
.stat .v small{font-size:12px;font-weight:400;color:var(--muted);margin-left:3px}

/* 上の余白が2pxしかなく、見出しやボタンが天井に張り付いていた。左右と揃える
   （2026-09-08 太田さんの指摘。タブのカードだけ直していたのを全部に広げた） */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;display:grid;gap:14px}
/* 見本に比べて小さかった（2026-09-08 太田さんの指摘）。案件名25px・カード見出し19pxとの間 */
.panel h2{margin:0;font-size:22px}
.panel .lead{font-size:12.5px;color:var(--muted);margin:-8px 0 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-form input{flex:1;min-width:240px}
form.inline{display:inline-flex;gap:6px;align-items:center}

table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th{text-align:left;font-size:12.5px;color:var(--read);font-weight:600;padding:9px 8px;border-bottom:1px solid var(--line);letter-spacing:.03em}
table.list td{padding:13px 8px;border-bottom:1px solid #f0f3f6;vertical-align:middle}
table.list td.nm{font-weight:700}
table.list td.nm a{color:var(--ink);text-decoration:none}
table.list td.nm a:hover{color:var(--navy2);text-decoration:underline}
.dots{display:flex;gap:5px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;background:#e0e5ea}
.dot.on{background:var(--navy)}
.dot.gold{background:var(--gold)}
.step{display:inline-block;font-size:12.5px;padding:4px 11px;border-radius:999px;background:#eef2f7;color:var(--read);white-space:nowrap}
.step.done{background:var(--ok-bg);color:var(--ok)}
.step.wait{background:var(--wait-bg);color:var(--wait)}

/* タブ */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabs a{padding:11px 16px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;font-size:14px}
.tabs a:hover{color:var(--ink)}
.tabs a.active{color:var(--navy);border-bottom-color:var(--gold);font-weight:700}
.tabs .lock{font-size:11px;opacity:.75}
.tab-body{display:grid;gap:18px;padding-top:4px}

/* 澪さんの吹き出し */
.say{display:flex;gap:13px;align-items:flex-start;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.say img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.say .txt{font-size:14px;line-height:1.85}
.say .who{font-size:11px;color:var(--muted);margin-bottom:3px}

.gen-form,.edit-form,.confirm-form{display:grid;gap:11px}
textarea{min-height:170px;line-height:1.75}
textarea.tall{min-height:470px;font-family:ui-monospace,"Consolas",monospace;font-size:13px}
.form-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.confirm-box{border:1.5px dashed var(--gold);border-radius:12px;padding:16px 18px;background:#fdfaf3;display:grid;gap:11px}
.confirm-box strong{color:var(--navy)}
.badge{display:inline-block;font-size:12.5px;padding:3px 10px;border-radius:999px;background:#eef2f7;color:var(--read);margin-left:8px;vertical-align:middle}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px}

/* 知らせの帯。丸いチェックと、閉じる×（2026-09-08 見本に合わせた） */
.notice{display:flex;align-items:center;gap:11px;background:var(--ok-bg);border:1px solid #b9dfd7;
  color:var(--ok);padding:12px 14px;border-radius:10px;margin:0;font-size:14px}
.notice svg{width:20px;height:20px;flex:none}
.notice span{flex:1 1 auto;min-width:0}
.notice .x{background:none;border:0;color:var(--ok);font-size:18px;line-height:1;padding:2px 6px;opacity:.7}
.notice .x:hover{background:rgba(31,107,77,.10);border:0;opacity:1}
.error{background:#fdecea;border:1px solid #f3c9c4;color:var(--danger);padding:11px 14px;border-radius:9px;margin:0}
.sub{font-size:12.5px;color:var(--muted)}
.danger{color:var(--danger)}
details.versions,details.setting{border:1px solid var(--line);border-radius:9px;padding:9px 13px;background:#fbfcfd}
details summary{cursor:pointer;font-size:14px}
details pre{white-space:pre-wrap;font-size:12px;background:#f7f9fb;padding:11px;border-radius:7px;overflow-x:auto}
ul.plain{margin:0;padding-left:18px;font-size:13px;color:var(--muted)}
.modes{display:grid;gap:9px}
.modes .mode{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:12px 14px;cursor:pointer}
.modes .mode.selected{border-color:var(--gold);background:#fdfaf3}
.modes .mode input{margin-top:5px}
.ops{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.is-submitting button[type=submit]{opacity:.55;pointer-events:none}
.busy{display:flex;gap:10px;align-items:center;color:var(--navy2);font-size:14px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.busy img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.spin{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto}
  .side nav{grid-template-columns:repeat(2,1fr);display:grid}
  .login-frame{grid-template-columns:1fr}
  .login-hero{min-height:280px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .greet .aside{display:none}
}




/* ============ 案件画面: 左で話して右でレポートを見る ============ */
.split{display:grid;gap:18px}
.split.has-report{grid-template-columns:minmax(330px,40%) 1fr;align-items:start}
.pane-left{min-width:0;display:grid;gap:14px}
.pane-right{min-width:0;display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;position:sticky;top:16px}
.pane-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;background:#f5f7fa;border-bottom:1px solid var(--line);font-size:13px}
.pane-ops{display:flex;gap:8px;align-items:center}
.report-frame{width:100%;height:72vh;min-height:520px;border:0;background:#fff;display:block}
.pane-note{margin:0;padding:8px 12px;border-top:1px solid var(--line)}

.feed summary,.raw summary{cursor:pointer;font-weight:600;padding:9px 0;color:var(--navy)}
.feed[open] summary,.raw[open] summary{margin-bottom:6px}
.feed input[type=file]{padding:8px 0}

.chat{display:flex;flex-direction:column;gap:9px}
.chat-empty{margin:0}
.bub{display:block;max-width:92%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.85}
.bub .t{display:block;white-space:pre-wrap}
.bub.me{align-self:flex-end;background:#e9f0fa;border:1px solid #d3e0f3}
.bub.from-mio{align-self:flex-start;background:var(--paper);border:1px solid var(--line)}
.edited{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;font-size:11.5px;
  color:var(--ok);background:var(--ok-bg)}
.ask{display:grid;gap:10px}
.ask textarea{width:100%}
.button.small,button.small{padding:5px 11px;font-size:12.5px}

@media(max-width:1100px){
  .split.has-report{grid-template-columns:1fr}
  .pane-right{position:static}
  .report-frame{height:60vh}
}

/* ============ 案件一覧 ============ */
/* 見出しに対して少し下げる（2026-09-08 太田さんの指摘） */
.newcase{position:relative;margin-top:8px}
.newcase > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(180deg,#e0b862 0%,#cfa243 100%);color:#fff;font-weight:700;
  font-size:15.5px;padding:12px 22px;border-radius:11px;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(90,60,10,.35);box-shadow:0 3px 10px rgba(184,145,47,.3)}
.newcase > summary::-webkit-details-marker{display:none}
.newcase > summary:hover{filter:brightness(1.04)}
.newcase[open] > summary{background:#eef2f7;color:var(--navy2);box-shadow:none}
.newcase .inline-form{margin-top:12px}
.newcase .inline-form input{min-width:min(360px,60vw)}

.listnote{margin:2px 0 10px}
table.list.cases th{background:#f6f8fa;border-top:1px solid var(--line);padding:10px 12px;font-size:11.5px}
table.list.cases th:first-child{border-top-left-radius:8px}
table.list.cases th:last-child{border-top-right-radius:8px}
/* 見本の行の間隔は約57px。ボタンが入るので上下は9pxで足りる */
table.list.cases td{padding:9px 12px}
table.list.cases tbody tr:hover{background:#fafcfe}
table.list.cases td.nm a{font-size:14.5px}
table.list.cases td.when{color:var(--read);font-size:13.5px;white-space:nowrap}
table.list.cases td.empty{color:var(--muted);padding:26px 12px}
th.opsc,td.opsc{width:44px;text-align:right}

.rowmenu{position:relative;display:inline-block}
.rowmenu > summary{list-style:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;
  padding:2px 8px;border-radius:7px}
.rowmenu > summary::-webkit-details-marker{display:none}
.rowmenu > summary:hover{background:#eef2f7;color:var(--navy2)}
.rowmenu .menu{position:absolute;right:0;top:28px;z-index:20;min-width:230px;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px;
  box-shadow:0 12px 30px rgba(20,40,70,.16);display:grid;gap:4px}
.rowmenu .menu a{display:block;padding:8px 10px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:13.5px}
.rowmenu .menu a:hover{background:#f2f6fa}
.rowmenu .menu a.off{color:#b3bcc6;pointer-events:none}
.rowmenu .menu form{display:flex;gap:6px;margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
.rowmenu .menu form input{flex:1;min-width:0;font-size:13px;padding:7px 9px}
.rowmenu .menu form button{font-size:12.5px;padding:7px 10px;white-space:nowrap}

@media(max-width:820px){
  .greet{flex-wrap:wrap}
  .greet .aside{display:none}
  .greet .face{width:64px;height:64px}
}

/* 挨拶バーの中で、確認待ちの案件名をそのまま押せるようにする */
.greet .wname{color:var(--navy2);font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--gold-l);padding-bottom:1px}
.greet .wname:hover{border-bottom-color:var(--gold)}
.greet .gnote{margin:0;color:#41505f;font-size:14px}
.greet .gnote + .gnote{margin-top:4px}
.greet .gnote.meet::before{content:"📅";margin-right:7px}

/* 面談日時（カレンダー付き）と、保存先フォルダの欄 */
input.dt{max-width:280px}
.folderbox input[name=folder]{width:100%;font-size:13px}
.folderbox .form-row{margin-top:8px}

/* 案件フォルダの一覧 */
table.list.files td{padding:11px 10px}
table.list.files td.nm a{font-size:13.5px}
table.list.files .when{color:var(--read);white-space:nowrap;font-size:13.5px}
table.list.files th.opsc,table.list.files td.opsc{width:84px}
table.list.files td.opsc button{white-space:nowrap}

/* ============================================================
   画面デザイン（見本 2026-09-08）。手書きとアイコンは素材から切り出したもの
   ============================================================ */

/* --- サイドバー --- */
/* ここが後に書かれているので、上の .side の position:sticky を打ち消していた。
   固定にならなかった原因（2026-09-08）。貼り付けの指定はこちらに集約する */
.side{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;overscroll-behavior:contain}
/* 見本の実測: キラキラ 39x35 で左端 x26、名前の左端 x77、名前の幅117px、
   一言の幅147px（1行に収まっている）、下の線は y89 */
.side .brand{display:flex;align-items:center;gap:12px;padding:0 12px 22px 24px;margin-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.11)}
.side .brand .spark{width:39px;height:36px;object-fit:contain;flex:none}
/* 見本は「営業担当AI」で24px入るが、「営業アナリスト」は7文字あって収まらない。
   名前を長くする時はここを小さくする（幅は 250-24-39-12-12 = 163px まで） */
.side .brand .n{font-size:21px;font-weight:700;color:#fff;letter-spacing:.005em;line-height:1.18;white-space:nowrap}
.side .brand .r{font-size:10.5px;color:#c2d1e3;margin-top:5px;line-height:1.3;white-space:nowrap}
.side nav a img.ic{width:24px;height:24px;object-fit:contain;flex:none}

/* いま開いているタブ。見本は「左は暗いガラス、右へ行くほど金」の横グラデーションに、
   明るい金の枠と白抜き文字。実測値（y=222 の行）から起こしている */
.side nav a.on{background:linear-gradient(90deg,#434b4c 0%,#454d4e 50%,#edc262 100%);
  color:#fff;font-weight:700;box-shadow:inset 0 0 0 2px #f0c864,0 3px 12px rgba(0,0,0,.22)}
.side nav a.on:hover{background:linear-gradient(90deg,#4b5354 0%,#4d5556 50%,#f2c86c 100%)}

/* 下の風景。見本では山が手書きの下に見えるところまで入っている（高さ約420px）。
   上の1/3は地の紺へなじませる */
/* 風景は画面の高さに関係なく同じ大きさで出す（background-size を固定pxにする）。
   枠自体は余った高さを受け取るので、画面が低くてもサイドバーは中で切れない */
.side-foot{margin-top:auto;position:relative;padding:32px 0 0;min-height:340px;flex:1 0 auto;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:url('img/side_scene.png') no-repeat center bottom/auto 484px}
.side-foot::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#112b4b 0%,rgba(17,43,75,.45) 28%,rgba(17,43,75,0) 60%)}
/* 見本の手書きは y612-683（高さ71px・幅163px）。ここに合わせている */
.side-foot .side-copy{position:relative;display:block;width:65%;margin:0 auto 211px;opacity:.95;flex-shrink:0}

/* --- 上のバー ---
   見本の実測（バーの高さ68px）に合わせている。名前・手書き・顔写真が小さすぎた（2026-09-08 修正）
     名前「高瀬 澪」  見本 幅54px / 前は44px
     手書きの一言      見本 226x27px / 前は163x18px
     右の顔写真        見本 直径52px / 前は42px
     右の名前          見本 幅56px / 前は44px            */
.head{gap:16px;padding:8px 26px}
.head-left{display:flex;align-items:center;gap:12px;min-width:0}
.head-left .head-ic{width:30px;height:30px;object-fit:contain;flex:none}
.head-left .n{font-size:17px;font-weight:700;line-height:1.25}
.head-left .r{font-size:11.5px;color:var(--read)}
.onduty{font-size:13.5px;color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:5px 13px;white-space:nowrap}
.head-copy{height:39px;width:auto;margin-left:8px;flex:none}
.head .staff img{width:52px;height:52px}
.head .staff .n{font-size:18px}
.head .staff .r{font-size:13.5px;color:var(--read)}

/* --- ページ見出し ---
   見本では、写真の帯の下のほうにタブのカードが重なって乗っている。
   帯を下に伸ばし、その上へカードを引き上げて重ねる（2026-09-08） */
.page-head{position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:16px;/* 中身は上寄せ */
  /* 見本には帯の枠線も上の切れ目もない。上のバーのすぐ下から始まり、
     左右は画面の端まで、下はぼかして地の色へ溶ける。カードはその上に乗る */
  border:0;border-radius:0;
  /* 上の余白。見本は上のバーから28pxだが、それだとホーム（60px）に比べて窮屈に見える。
     間をとって48pxにしている（2026-09-08 太田さんの指摘） */
  padding:42px 54px 46px;min-height:178px;margin:-22px -30px 0;
  background:var(--paper) url('img/greet_bg.png') no-repeat center/cover}
/* 左端は「地の色そのもの」。そこから右へ向かって、だんだん写真が出てくる。
   前は白から始めていたので、地との境目がくっきり出ていた（2026-09-08 修正）。
   見本の実測（y=160 の行）: x255=246 x455=249 x755=238 x855=230 x955=185 */
.page-head::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--bg) 0%, var(--bg) 20%,
    rgba(244,246,249,.88) 33%,
    rgba(244,246,249,.60) 43%,
    rgba(244,246,249,.26) 52%,
    rgba(244,246,249,0) 64%)}
/* 下端を地の色へぼかす。切れ目をなくすため */
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(180deg,rgba(244,246,249,0) 0%,var(--bg) 100%)}
.page-head > *{position:relative;z-index:1}
.page-head .page-ic{width:52px;height:52px;object-fit:contain;flex:none}
/* 行の高さを詰めないと、見本より10px下がる */
.page-head h2{margin:0;font-size:25px;letter-spacing:.01em;line-height:1.25}
.page-head .lead{margin:5px 0 0;font-size:14px;color:var(--read)}
/* 手書きの大きさは見本の実測に合わせる（前は1.48倍小さかった） */
.page-head .page-copy{margin-left:auto;height:86px;width:auto;flex:none}

/* --- タブ（チップ型） --- */
/* 見出しの帯に重ねる。丸みの分だけ帯が四隅からのぞく */
.page-head + .panel{margin-top:-54px;position:relative;z-index:1;
  box-shadow:0 -1px 20px rgba(18,48,88,.07)}
.tabs{gap:9px;border-bottom:0;padding-bottom:2px}
/* 見本の実測: どのタブも枠線なし。淡い地の色だけ。
   いま開いているタブは、白い枠ではなく下に青い線（4px・#2563eb・タブの幅いっぱい）。
   地の色は #f3f8fd、文字は濃い色の太字 */
.tabs a{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;
  border:0;background:#f1f4f9;color:var(--read);font-size:16px;font-weight:600;text-decoration:none}
.tabs a img{width:25px;height:25px;object-fit:contain}
.tabs a:hover{background:#e7eef7;color:var(--navy2)}
.tabs a.active{background:#f3f8fd;color:var(--ink);font-weight:700;
  border-radius:12px 12px 3px 3px;box-shadow:inset 0 -4px 0 #2563eb}

/* --- 澪さんのひとこと --- */
/* 見本では、右端に葉の枝が置いてあり、手書きの一言はその左に来る。
   枝は吹き出しの角で切れて見えるので、はみ出した分は隠す。
   手書きを大きくして枠が高くなったぶん、顔・文字も大きくして上下の中央に置く
   （2026-09-08 太田さんの指摘。前は上寄せで、下に空きができていた） */
.say{position:relative;gap:16px;overflow:hidden;align-items:center;padding:16px 18px}
.say .txt{font-size:15.5px;line-height:1.8}
.say .who{font-size:14px;color:var(--read);margin-bottom:4px}
.say .leaf{position:absolute;right:-6px;bottom:-18px;width:112px;height:auto;
  border-radius:0;object-fit:contain;pointer-events:none;opacity:.95}
/* 顔写真は全画面で同じ大きさ。案件一覧に揃えた（2026-09-08 太田さんの指摘） */
.say > img{width:92px;height:92px;border-radius:50%;object-fit:cover;flex:none}
/* 手書きは丸くしない。.say img の指定に巻き込まれないよう個別に上書きする */
/* 同じく見本に合わせる（前は1.35倍小さかった） */
.say > img.say-copy{margin-left:auto;height:81px;width:auto;max-width:42%;border-radius:0;
  object-fit:contain;flex:none;align-self:center;margin-right:104px}

/* 素材のアイコンは淡い色なので、小さく置く時は薄い丸を敷いて輪郭を出す */
.tabs a img,.card > summary .card-ic,.page-head .page-ic{background:#eef4fb;border-radius:50%;padding:3px}
.tabs a.active img{background:#dfeaf8}

/* --- カード（材料をわたす 等） --- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.card > summary{display:flex;align-items:flex-start;gap:13px;list-style:none;cursor:pointer;padding:0}
.card > summary::-webkit-details-marker{display:none}
.card > summary .card-ic{width:38px;height:38px;object-fit:contain;flex:none;margin-top:1px}
.card > summary b{display:block;font-size:19px;color:var(--ink);line-height:1.4}
.card > summary small{display:block;font-size:13.5px;color:var(--read);font-weight:400;margin-top:4px;line-height:1.6}
.card[open] > summary{margin-bottom:14px}

/* --- 2列（ファイル／面談日時） --- */
/* 左右の間は広めに。狭いとドロップ欄と日時がくっついて見える（2026-09-08） */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:1100px){.two-col{grid-template-columns:1fr}}

/* --- ドラッグ＆ドロップ --- */
.drop{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;
  border:1.5px dashed #b9cde4;border-radius:12px;background:#f7fafd;padding:20px 16px}
.drop:hover,.drop.over{background:#eef5fc;border-color:#7fa8d8}
.drop svg{width:30px;height:30px}
.drop b{font-size:13.5px;color:var(--navy2)}
.drop span{font-size:12px;color:var(--muted)}
.drop input[type=file]{display:none}
.drop .picked{font-size:12px;color:var(--muted);font-style:normal;margin-top:6px}

/* --- ヒントの吹き出し --- */
/* 幅は上の日時の入力欄（260px）と同じ。横に長いと右下のイラストに重なる
   （2026-09-08 太田さんの指摘） */
.hint{margin:10px 0 0;max-width:280px;background:#fdf8ea;border:1px solid #f0e2bd;border-radius:10px;
  padding:10px 13px;font-size:12.5px;line-height:1.75;color:#6b5b1e}

/* --- 金色の大きいボタン --- */
.btn-gold.big{border:0;background:linear-gradient(180deg,#e0b862 0%,#cfa243 100%);color:#fff;
  font-size:16px;font-weight:700;padding:13px 30px;border-radius:11px;letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(90,60,10,.35);box-shadow:0 4px 14px rgba(184,145,47,.32)}
.btn-gold.big:hover{background:linear-gradient(180deg,#e6c073 0%,#d5aa4c 100%);border:0}
.btn-gold.big img{width:20px;height:20px;object-fit:contain}
.btn-gold.big span{font-size:16px}

/* --- 右下の澪さん（レポートが出る前だけ） --- */
/* カードの中の右下。枠線に重ならないよう、カードの内側に置く */
.card{position:relative}
/* 足元が「材料をわたす」カードの下線にちょうど乗る位置。
   画像の下に7pxの透明な余白があるので、その分だけ下げる（2026-09-08） */
.mio-cheer{position:absolute;right:20px;bottom:-7px;width:min(330px,40%);height:auto;pointer-events:none}
@media(max-width:1300px){.mio-cheer{display:none}}


.tabs a svg.ti{width:24px;height:24px;flex:none}
.tabs a.active svg.ti{stroke:var(--navy2)}

/* ============================================================
   案件一覧の画面（見本 2026-09-08）
   見本にある検索・絞り込み・顧客名・区分は入れていない。
   デザインを合わせる話で、機能を足す話ではないため
   ============================================================ */

/* 上の澪さんの帯。右上から葉が入る */
.lead-say{overflow:hidden}
/* 葉は右上の角に置く飾り。大きさは元のまま。
   左へ寄せると角から離れて浮いて見えるので、この位置で止めている
   （2026-09-08 太田さんと確認） */
.lead-say .leaf-corner{position:absolute;right:-4px;top:-22px;width:98px;height:auto;
  border-radius:0;object-fit:contain;pointer-events:none;opacity:.95}
.lead-say > img.say-copy{margin-right:100px}

/* 見出しの行。左に絵と題、右に件数と作成ボタン */
/* 右端は、下の表の「⋯」と同じ位置で止める。カードの端まで伸ばすと
   下の行より22px出っ張って見える（2026-09-08 太田さんの指摘） */
.caselist .list-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-right:22px}
.caselist .sec-ic{width:40px;height:40px;object-fit:contain;flex:none}
.caselist .list-head h2{margin:0;font-size:26px}
.caselist .sec-lead{margin:0;font-size:13.5px;color:var(--read);flex:1 1 240px}
.caselist .tally{display:flex;align-items:center;gap:9px;flex:none}
.caselist .tally .all{font-size:13.5px;color:var(--read)}
.caselist .tally .all b{font-size:17px;color:var(--ink);margin:0 2px}
.caselist .tally .pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--read);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 13px;white-space:nowrap}
.caselist .tally .pill b{font-size:14.5px;color:var(--ink)}
.caselist .tally .pill i{width:9px;height:9px;border-radius:50%;flex:none}
.caselist .tally .soon i{background:#2b62c4}
.caselist .tally .done i{background:#1f9d5a}
.caselist .tally .need i{background:#e0453a}
.caselist .list-head .newcase{margin-top:0}

/* 状態の札。数の色と揃える */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;border-radius:999px;
  padding:6px 14px;white-space:nowrap;font-weight:600}
.chip.soon{background:#eef2f8;color:#3d4d63}
.chip.done{background:#e6f5ec;color:#1f7a4a}
.chip.need{background:#fdeceb;color:#c0342a}
.chip svg{width:15px;height:15px;flex:none}

/* 要対応だけを上にまとめた枠 */
/* 右の余白は6px。下の表の「⋯」と右端をそろえるため（実測で決めた） */
.priority{border:1px solid #f3dfae;border-radius:12px;background:#fdf8ea;padding:14px 6px 16px 16px;display:grid;gap:10px}
.pri-head{display:flex;align-items:center;gap:9px}
.pri-head img{width:24px;height:24px;object-fit:contain;flex:none}
.pri-head b{font-size:17px}
.pri-head span{font-size:13px;color:#7a6a2e}
.pri-row{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid #f0e2bd;
  border-radius:10px;padding:13px 4px 13px 16px}
.pri-row .nm{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700}
.pri-row .nm a{color:var(--ink);text-decoration:none}
.pri-row .nm a:hover{text-decoration:underline}
.pri-row .when{font-size:13.5px;color:var(--read);white-space:nowrap}

/* 「すべての案件」の見出し */
.all-head{display:flex;align-items:center;gap:10px;margin-top:2px}
.all-head .sec-svg{width:22px;height:22px;flex:none}
.all-head b{font-size:17px}

/* 行のボタン */
/* 文字と「›」はひとまとまりで中央。見本もそうなっている */
.act{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;
  font-size:13.5px;font-weight:700;text-decoration:none;padding:10px 16px;border-radius:9px;min-width:186px}
.act span{font-size:15px;line-height:1}
.act.navy{background:linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);color:#fff;
  box-shadow:0 3px 10px rgba(15,42,74,.18)}
.act.navy:hover{background:linear-gradient(180deg,#1d4a7d 0%,#12314f 100%)}
/* 要対応のボタン。見本の実測は平らな #fec422 に濃い文字。
   金のグラデーションは「＋ 新しい案件を作成」だけに残す（2026-09-08 太田さん） */
.act.attn{background:#fec422;color:#3a3413;box-shadow:0 2px 6px rgba(190,140,20,.22)}
.act.attn:hover{background:#ffcf3d}
.act.plain{background:var(--paper);color:var(--navy2);border:1px solid #cfd8e2}
.act.plain:hover{background:#f2f6fa}
table.list.cases td.actc{width:1%;white-space:nowrap;padding-right:4px}

/* 優先案件の行。理由を名前の下に1行で書く */
.pri-row .nm small{display:block;font-size:12.5px;font-weight:400;color:var(--read);margin-top:3px}
.chip.meet{background:#fdf3e0;color:#8a6416}

/* 優先案件と下の表で、案件名の左端とボタンの右端をそろえる。
   優先案件の枠（padding 16）＋行（padding 16）＝32、表は td の 12。
   表側を32に寄せて合わせる（2026-09-08 太田さんの指摘） */
table.list.cases th:first-child,table.list.cases td:first-child{padding-left:32px}
.pri-row .rowmenu{margin-left:2px}
.rowmenu summary .del,.rowmenu .menu button.del{color:var(--danger)}
.rowmenu .menu form + form{border-top:1px solid var(--line);margin-top:4px;padding-top:6px}

/* 案件一覧の帯。手書きを大きくしても帯の高さは124pxのまま（顔92＋余白32 ＝ 手書き96＋余白28） */
.lead-say{padding:14px 18px}
.lead-say > img.say-copy{height:96px;max-width:46%}

/* ============================================================
   ホーム画面（見本 2026-09-08）
   予定表・通知・会社名など、データが無いものは作っていない
   ============================================================ */

/* 挨拶の帯。背景は素材から作った1枚絵（tools/build_greet_hero.py） */
.hero{position:relative;overflow:hidden;border-radius:14px;min-height:230px;
  display:flex;align-items:center;gap:20px;padding:20px 40px 20px 428px;
  /* 澪さんは別画像を重ねず、帯の1枚絵に焼き込んである。
     重ねると、そこに必ず継ぎ目の線が出るため（2026-09-08 太田さんの指摘）。
     cover なので帯が低くなっても右端まで必ず届く。左を基準にして澪さんの位置を保つ
     （auto 100% だと帯が低い時に右が足りず、そこに縦の切れ目が出た）。
     ★ホームと顧客分析は別の写真を使う。ここは greet_hero.png（笑顔のカット）。
       顧客分析は pick_hero.png（指を立てたカット）。取り違えないこと */
  background:#eef4fb url('img/greet_hero.png') no-repeat left center/cover}
/* 澪さんのところは写真をそのまま見せ、文字のところだけ白をかぶせる。
   見本を測ると、写真は左3割だけで、そこから右はほぼ白（明るさ243〜252）だった
   （2026-09-08 太田さんの指摘） */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* 白がかかり始めるのは澪さんの右端から。彼女の上には一切かけない。
     見本を測ると、文字の上のほうは平均247・ばらつき3.6（ほぼ平ら）、
     下のほうは平均227・ばらつき15.7（写真が見えている）。
     横方向だけでなく、上を強く・下を弱くする縦方向も重ねている（2026-09-08） */
  /* 位置は％ではなくpxで持つ。％だと帯の高さが変わったときに、
     白が澪さんの上に乗ってしまう（2026-09-08 太田さんの指摘で判明）。
     澪さんの体は帯の左から約320px（帯が高い時で約410px）で終わる */
  /* 立ち上がりを何段にも分けて、折れ目が線に見えないようにする。
     一気に濃くすると、始まる位置に縦の筋が見える（2026-09-08 太田さんの指摘） */
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0, rgba(255,255,255,0) 435px,
    rgba(255,255,255,.01) 465px, rgba(255,255,255,.04) 505px,
    rgba(255,255,255,.12) 550px, rgba(255,255,255,.28) 605px,
    rgba(255,255,255,.48) 670px, rgba(255,255,255,.63) 745px,
    rgba(255,255,255,.70) 820px, rgba(255,255,255,.70) 86%,
    rgba(255,255,255,.36) 100%)}
/* 上のほうだけ白を足して見出しを読みやすくする。
   これも澪さんに届かないよう、横方向のマスクで右側だけに効かせる */
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 60%,rgba(255,255,255,0) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0 465px,rgba(0,0,0,.06) 520px,rgba(0,0,0,.35) 600px,#000 720px);
          mask-image:linear-gradient(90deg,transparent 0 465px,rgba(0,0,0,.06) 520px,rgba(0,0,0,.35) 600px,#000 720px)}
.hero > *{position:relative;z-index:1}
/* 澪さんは背景に焼き込まず、左端に置いた画像。帯の高さが変わっても位置が動かない */
.hero-txt{flex:1 1 auto;min-width:0}
.hero h1{margin:0 0 4px;font-size:30px;font-weight:700;letter-spacing:.01em;color:#14243d}
.hero .q{margin:0 0 6px;font-size:19px;font-weight:700;color:#22344f}
.hero .note{margin:0 0 4px;font-size:14.5px;color:#28394d;line-height:1.8}
.hero .note a{color:var(--navy2);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(200,162,74,.6)}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hero-tags span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);
  border:1px solid #dbe6f2;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:#2b3f59}
.hero-copy{width:min(290px,24%);height:auto;flex:none;align-self:center}

/* 数字のカード */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{position:relative;display:flex;align-items:center;gap:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px 30px;text-decoration:none;color:inherit}
a.stat:hover{border-color:#cfe0f2;box-shadow:0 3px 12px rgba(20,60,110,.08)}
.stat .ic{width:52px;height:52px;border-radius:13px;object-fit:contain;padding:8px;background:#eef2f7;flex:none}
.stat .ic.b{background:#e8f0fb}.stat .ic.y{background:#fdf3e0}.stat .ic.g{background:#e9f4ee}
.stat .k{font-size:13.5px;color:var(--read)}
.stat .v{font-size:30px;font-weight:700;color:var(--ink);line-height:1.2}
.stat .v small{font-size:13px;font-weight:400;color:var(--read);margin-left:3px}
.stat .cap{font-size:12px;color:var(--read);margin-top:2px}
.stat .go{position:absolute;right:16px;bottom:10px;font-size:12.5px;color:var(--navy2);font-weight:600}
.stat.warm{background:#fffdf6;border-color:#f0e2bd}

/* 下段。左に最近の案件、右に澪さんからのメッセージ */
.home-cols{display:grid;grid-template-columns:1fr minmax(300px,25%);gap:14px;align-items:start}
.recent .list-head{display:flex;align-items:center;gap:12px}
.recent .sec-ic{width:34px;height:34px;object-fit:contain;flex:none}
.recent .list-head h2{margin:0;font-size:20px}
.recent .list-head .go{margin-left:auto;font-size:13.5px;color:var(--navy2);font-weight:600;text-decoration:none}
.rec-rows{display:grid}
.rec{display:flex;align-items:center;gap:16px;padding:13px 6px 13px 10px;text-decoration:none;color:inherit;
  border-top:1px solid #f0f3f6}
.rec:first-child{border-top:0}
.rec:hover{background:#f7fafd}
.rec .nm{font-size:15px;font-weight:700;flex:0 0 auto;min-width:210px}
.rec .next{flex:1 1 auto;font-size:13.5px;color:var(--read);min-width:0}
.rec .when{font-size:13.5px;color:var(--read);white-space:nowrap}
.rec .arw{color:#8fa3b8;font-size:18px;line-height:1}

/* 澪さんからのメッセージ */
.mio-msg{position:relative;overflow:hidden;min-height:250px}
.mm-head{display:flex;align-items:center;gap:11px}
.mm-head img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--gold)}
.mm-head b{font-size:15px}
.mm-copy{display:block;width:88%;height:auto;margin:18px auto 0}
.mm-leaf{position:absolute;right:-14px;bottom:-18px;width:120px;height:auto;opacity:.95;pointer-events:none}

@media(max-width:1200px){
  .home-cols{grid-template-columns:1fr}
  .hero{padding-left:40px;padding-top:200px;background-position:left top}
}

/* 数字カードのアイコンは画像とSVGの両方。時計と円マークは素材が無いので描いている */
svg.ic{width:52px;height:52px;border-radius:13px;padding:11px;background:#eef2f7;flex:none}

/* --- ホーム：いただいた素材に差し替えたぶん（2026-09-08） --- */

/* 帯の左、写真に重ねる手書き */
.hero-ask{position:absolute;left:24px;top:70px;width:120px;height:auto;z-index:2;pointer-events:none}

/* 丸い地色が絵に入っている素材なので、こちらで丸を敷かない */
.stat .ic.plain{background:none;padding:0;border-radius:0;width:56px;height:56px}
.recent .sec-ic{width:38px;height:38px}

/* 澪さんからのメッセージ。下に風景を敷く */
.mio-msg{padding-bottom:120px}
.mm-copy{width:92%;margin:16px auto 0}
.mm-scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;pointer-events:none}

/* ============================================================
   機能ごとの「どの案件で進めますか」画面（見本 2026-09-08 顧客分析ページ）
   会社名・区分・検索は入れていない
   ============================================================ */

.pick-hero{position:relative;overflow:hidden;border-radius:14px;min-height:240px;
  display:flex;align-items:center;gap:24px;padding:22px 26px 22px 502px;
  /* 澪さんと手書きが1枚に入った素材（2026-09-08 いただいたもの）をそのまま敷く */
  background:#fbfcfe url('img/pick_hero.png') no-repeat left top/auto 100%}
.pick-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* 写真は帯の左480pxまで。そこから先はしっかり白くする。
     下2行の頭が緑に重なって読みにくかったため（2026-09-08 太田さんの指摘） */
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0, rgba(255,255,255,0) 462px,
    rgba(255,255,255,.30) 496px, rgba(255,255,255,.68) 540px,
    rgba(255,255,255,.82) 610px, rgba(255,255,255,.84) 100%)}
.pick-hero > *{position:relative;z-index:1}
.ph-txt{flex:1 1 auto;min-width:0}
.ph-txt .crumb{font-size:14px;color:var(--read);font-weight:600;margin-bottom:2px}
.ph-txt h1{margin:0 0 8px;font-size:29px;font-weight:700;color:#14243d;letter-spacing:.01em}
.ph-txt p{margin:0;font-size:14.5px;color:#33475f;line-height:1.85}
.ph-note{position:relative;flex:none;width:min(330px,26%);background:rgba(255,255,255,.94);
  border:1px solid #e6edf5;border-radius:14px;padding:16px 18px;box-shadow:0 4px 16px rgba(20,50,90,.07)}
.ph-note > img:first-child{display:block;width:82%;height:auto}
.ph-note .leaf{position:absolute;right:8px;bottom:8px;width:74px;height:auto}

/* 見出しの行 */
.pick-todo .list-head,.pick-done .list-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.pick-todo .sec-ic,.pick-done .sec-ic{width:30px;height:30px;object-fit:contain;flex:none}
.pick-todo .list-head h2,.pick-done .list-head h2{margin:0;font-size:22px}
.pick-todo .sec-lead,.pick-done .sec-lead{margin:0;font-size:13.5px;color:var(--read)}
.pick-todo .list-head .go{margin-left:auto;font-size:13.5px;color:var(--navy2);font-weight:600;text-decoration:none}

/* これから／進行中のカード */
.pick-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pcard{border:1px solid #f0e2bd;border-radius:14px;background:#fffdf6;padding:14px 16px 16px;display:grid;gap:11px}
.pcard.doing{border-color:#cfe0f2;background:#f6faff}
.pc-top{display:flex;align-items:center;justify-content:space-between}
.pcard .chip img{width:16px;height:16px;object-fit:contain}
.chip.doing{background:#e6f0fc;color:#1d4a7d}
.pc-name{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700}
.pc-name img{width:22px;height:22px;object-fit:contain;flex:none}
.pc-name a{color:var(--ink);text-decoration:none}
.pc-name a:hover{text-decoration:underline}
.pc-when{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--read)}
.pc-when img{width:18px;height:18px;object-fit:contain;flex:none}
.pc-when b{font-weight:600;color:var(--ink)}
.pc-msg{margin:0;background:#fdf8ea;border-radius:10px;padding:11px 13px;font-size:13px;line-height:1.75;color:#6b5b1e}
.pcard.doing .pc-msg{background:#eaf2fc;color:#1d4a7d}
.pc-btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  font-size:15.5px;font-weight:700;padding:13px 18px;border-radius:11px;
  background:#f0982a;color:#fff;box-shadow:0 3px 10px rgba(190,120,20,.25)}
.pc-btn:hover{background:#f5a642}
.pc-btn.doing{background:linear-gradient(180deg,#2f6fd0 0%,#1f57ad 100%);box-shadow:0 3px 10px rgba(20,60,140,.25)}
.pc-btn.doing:hover{background:linear-gradient(180deg,#3a7cdd 0%,#2762bb 100%)}

/* 済みの表 */
.pick-done table.list.cases td.nm{display:flex;align-items:center;gap:10px}
.pick-done .rowic{width:22px;height:22px;object-fit:contain;flex:none}
.pick-done .chip img{width:16px;height:16px;object-fit:contain}
.pick-done .act{min-width:150px}

@media(max-width:1200px){
  .pick-hero{padding:200px 24px 22px;background-position:left top}
  .pick-hero .ph-copy{left:24px;top:20px}
  .ph-note{width:100%}
}

/* 「＋ 新しい案件を作成」を押して入力欄が開いたら、そのボタンは小さな「閉じる」に変える
   （2026-09-08 太田さんの指摘。入力欄の真上に同じボタンが残っていた） */
.newcase .lbl-close{display:none}
.newcase[open] .lbl-open{display:none}
.newcase[open] .lbl-close{display:inline}
.newcase[open] > summary{background:none;color:var(--read);box-shadow:none;text-shadow:none;
  font-size:13px;font-weight:600;padding:4px 6px;border-radius:7px}
.newcase[open] > summary:hover{background:#eef2f7;filter:none}
.newcase[open] .inline-form{margin-top:6px}

/* ============================================================
   澪さんとの会話（見本 2026-09-08 顧客分析の個別画面）
   澪さんは顔写真つきで左、担当者は右。時刻を添える
   ============================================================ */
.chat{display:flex;flex-direction:column;gap:14px}
/* 顔写真は上、時刻は下にそろえる（見本と同じ） */
.turn{display:flex;align-items:flex-start;gap:10px}
.turn.me{justify-content:flex-end}
/* 吹き出しの側（右）を向いているカットを使う。少し大きめ（2026-09-08 太田さん） */
.turn .av{width:54px;height:54px;margin-top:18px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #e8eef6}
.turn .said{min-width:0}
.turn .who{font-size:12.5px;color:var(--read);margin:0 0 3px 2px}
.turn .tm{font-size:12px;color:var(--muted);white-space:nowrap;flex:none;align-self:flex-end;padding-bottom:3px}
.bub{display:block;max-width:100%;padding:11px 15px;font-size:14.5px;line-height:1.85}
.bub .t{display:block;white-space:pre-wrap}
.bub.me{background:#eaf1fb;border:1px solid #d3e0f3;border-radius:14px 14px 4px 14px}
.bub.from-mio{background:var(--paper);border:1px solid var(--line);border-radius:4px 14px 14px 14px}
.turn.me .bub{max-width:min(560px,80%)}

/* 入力欄。右下に文字数を出す */
.ask-box{position:relative}
.ask-box textarea{padding-bottom:30px}
.ask-box .count{position:absolute;right:12px;bottom:9px;font-size:12px;color:var(--muted);pointer-events:none}
.ask .btn-navy svg,.ask .secondary svg{width:17px;height:17px;flex:none}

/* 入力欄の下。ボタンの右に操作の説明を小さく置く */
.ask-row{align-items:center}
.ask-row .keyhint{font-size:12.5px;color:var(--muted)}
.pane-ops .secondary.small svg{width:15px;height:15px}

/* 提案書を作るところ。開閉をやめて、そのまま置く箱にした（2026-09-08） */
/* 中の間隔は広めに。特にボタンの上が詰まって見えた（2026-09-08 太田さんの指摘） */
.make-box{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px 20px;gap:16px}
.make-box .sub{margin:0}

/* ============================================================
   進む順番（顧客分析 → 提案書作成 → 商談フィードバック）
   タブの右に置く。済んだところはチェック、いま居るところは青
   ============================================================ */
.steps{display:flex;align-items:center;gap:0;list-style:none;margin:0 0 0 auto;padding:0}
.steps li{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;padding:0 22px}
.steps li::before{content:"";position:absolute;left:-14px;top:13px;width:28px;height:2px;background:var(--line)}
.steps li:first-child::before{display:none}
.steps li.done::before,.steps li.now::before{background:#8ec5a6}
.steps .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:#eef2f7;color:var(--read);font-size:13px;font-weight:700}
.steps .dot svg{width:15px;height:15px}
.steps .lb{font-size:12.5px;color:var(--read);white-space:nowrap}
.steps li.done .dot{background:#1f9d5a;color:#fff}
.steps li.now .dot{background:#2f6fd0;color:#fff}
.steps li.now .lb{color:var(--navy2);font-weight:700}
@media(max-width:1400px){
  .steps{margin-left:0;width:100%;justify-content:flex-start;padding-top:6px}
}

/* 提案書を作るところ */
.mb-head{display:flex;align-items:center;gap:10px}
.mb-head img{width:30px;height:30px;object-fit:contain;background:#eef4fb;border-radius:50%;padding:4px}
.mb-head b{font-size:19px}
.mb-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
/* 「> span」にすること。span だけだと中の文字を包む span にも枠が付く
   （2026-09-08 太田さんの指摘。文字のまわりに四角が出ていた） */
.mb-items > span{display:flex;align-items:center;gap:12px;background:#f7fafd;border:1px solid #e6eef7;
  border-radius:11px;padding:13px 15px;font-size:13.5px;line-height:1.5}
.mb-items img{width:42px;height:42px;object-fit:contain;background:#eef4fb;border-radius:50%;padding:7px;flex:none}
.mb-items b{display:block;font-size:13.5px}
.mb-items small{display:block;font-size:12.5px;color:var(--read)}
.mb-go{align-items:center;gap:16px;margin-top:6px}
.btn-navy.big{font-size:16px;padding:14px 26px;border-radius:11px;gap:10px}
.btn-navy.big img{width:20px;height:20px;object-fit:contain}
.btn-navy.big span{font-size:17px;line-height:1}

.mb-items .tx{display:block;min-width:0}
/* 澪さんのひとことを2段にする時（見本の提案書ページ） */
.say .txt b.big{display:block;font-size:19px;line-height:1.6;color:var(--ink)}
.say .txt .sub2{display:block;font-size:14px;color:var(--read);margin-top:6px}

/* いただいた素材の置き場所（2026-09-08 提案書作成ページ） */
/* .say img の width:44px に負けないよう、同じ強さで指定する */
.say > img.say-dialog{margin-left:auto;width:min(280px,28%);height:auto;flex:none;
  align-self:center;border-radius:0;object-fit:contain}
/* 「提案書を作る」の右にイラスト。文の幅はイラストのぶんだけ空ける */
.make-box{position:relative;padding-right:300px}
.mb-art{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:262px;height:auto;pointer-events:none}
@media(max-width:1500px){
  .make-box{padding-right:20px}
  .mb-art{display:none}
}

/* ============ 提案書テンプレート ============ */
/* 表紙の絵は3つとも同じ（同じ資料の派生なので当然）。違いが出るのは
   「全何枚のうち、どこを澪さんが書くか」なので、そこを帯にして見せる。
   2026-09-08 実物19本を突き合わせて分かったこと */

/* --- 案件画面（提案書を作る箱の中） --- */
.mb-tpl{display:grid;gap:9px;margin-top:2px}
.mt-head{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--ink)}
.mt-head a{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--navy2);text-decoration:none}
.mt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:11px}
.mt-card{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:var(--paper);border:1.5px solid var(--line);border-radius:11px;padding:10px 11px;transition:.12s}
.mt-card:hover{border-color:#b9cbe2;background:#fbfdff}
.mt-card.on{border-color:var(--navy2);background:#f5f9ff;box-shadow:0 0 0 3px rgba(47,111,208,.10)}
.mt-card input{position:absolute;opacity:0;pointer-events:none}
.mt-thumb{width:74px;flex:none;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;
  display:block;line-height:0}
.mt-thumb img{width:100%;height:auto;display:block}
.mt-thumb .noimg{display:block;width:100%;padding-top:75%;background:#eef2f7}
.mt-tx{display:block;min-width:0}
/* 「> b」「> small」にすること。子孫全部に効かせると、中の <b> まで
   ブロックになって「全18枚のうち／3枚／を書きます」と3行に割れる
   （2026-09-08。チップの時と同じ間違い） */
.mt-tx > b{display:block;font-size:14px;line-height:1.35}
/* ひとことは1行に留める。3枚のカードで帯と枚数の高さを揃えるため */
.mt-tx > small{display:block;font-size:12px;color:var(--read);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 枚数は省略しない。「.mt-tx > small」の省略表示が効いてしまうので、明示的に戻す
   （2026-09-08。狭い欄で「全18枚 ／ 澪さ…」と切れていた） */
/* 「.mt-tx > small」(0,1,1) の方が「.mt-facts」(0,1,0) より強い。
   クラスだけで書くと省略表示が解除できないので、同じ形で上書きする
   （2026-09-08。.say img と .say-dialog の時と同じ引っかかり） */
.mt-tx > small.mt-facts{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}

/* 何枚目を書き替えるかの帯。1本＝1枚 */
.mt-map,.tc-map{display:flex;gap:1.5px;margin:7px 0 5px}
.mt-map i,.tc-map i{flex:1 1 auto;height:9px;border-radius:1.5px;background:#dde4ec}
.mt-map i.mine,.tc-map i.mine{background:linear-gradient(180deg,#e0b862 0%,#cfa243 100%)}
.mt-facts b{color:var(--navy2);white-space:nowrap}

/* --- 原稿の下に出る、スライドの受け取り口 --- */
.tpl-out{display:flex;align-items:center;gap:13px;background:#f5f9ff;border:1px solid #d6e4f5;
  border-radius:11px;padding:13px 15px}
.tpl-out > img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:50%;padding:6px;flex:none}
.tpl-out > div{min-width:0;flex:1 1 auto;font-size:14px}
.tpl-out .sub{display:block;margin-top:2px}
.tpl-out .btn-navy{flex:none;text-decoration:none;display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:9px;font-size:13.5px}

/* --- 一覧画面 --- */
.tpl-list .list-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.tpl-list .sec-ic{width:32px;height:32px;object-fit:contain;flex:none}
.tpl-list .list-head h2{margin:0;font-size:22px}
.tpl-list .sec-lead{margin:0;font-size:13.5px;color:var(--read)}
.tpl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.tcard{display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.tcard.is-default{border-color:var(--navy2);box-shadow:0 0 0 3px rgba(47,111,208,.09)}
.tc-thumb{position:relative;background:#f2f5f8;line-height:0;border-bottom:1px solid var(--line)}
.tc-thumb img{width:100%;height:auto;display:block}
.tc-thumb .noimg{display:block;padding:44px 0;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.4}
/* 表紙の上に置くと、資料の緑帯やロゴに重なって読めない。名前の横に出す（2026-09-08） */
.tc-flag{display:inline-block;margin-left:8px;vertical-align:2px;background:var(--navy2);color:#fff;
  font-size:11.5px;padding:2px 9px;border-radius:999px;letter-spacing:.04em;font-weight:400}
.tc-body{padding:13px 15px 11px;display:grid;gap:2px;align-content:start}
.tc-name{font-size:16px}
.tc-note{margin:0;font-size:12.5px;color:var(--read)}
.tc-facts{display:flex;gap:12px;font-size:12.5px;color:var(--read)}
.tc-facts b{color:var(--ink);font-size:14px}
.tc-facts .mine b{color:#b78a2e}
.tc-pages{margin-top:7px;border-top:1px solid var(--line);padding-top:7px}
.tc-pages summary{cursor:pointer;font-size:12.5px;color:var(--navy2);list-style:none}
.tc-pages summary::-webkit-details-marker{display:none}
.tc-pages summary::before{content:"▸ "}
.tc-pages[open] summary::before{content:"▾ "}
.tc-pages ol{margin:7px 0 0;padding-left:18px;font-size:12.5px;color:var(--read);line-height:1.7}
.tc-ops{display:flex;align-items:center;gap:10px;padding:9px 15px;background:#fafbfd;border-top:1px solid var(--line)}
.tc-ops a{font-size:12.5px;color:var(--navy2);text-decoration:none}
.tc-ops form{margin:0}
.tc-ops .link-del{margin-left:auto;border:0;background:none;color:#b1443c;font-size:12.5px;cursor:pointer;padding:0}
.tc-ops .link-del:hover{text-decoration:underline}

/* --- 登録フォーム --- */
.newtpl > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  padding:11px 20px;border-radius:10px;font-size:15px;font-weight:600}
.newtpl > summary::-webkit-details-marker{display:none}
.newtpl .lbl-close,.newtpl[open] .lbl-open{display:none}
.newtpl[open] .lbl-close{display:inline}
.tpl-form{display:grid;gap:14px;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.tf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tpl-form label{display:grid;gap:4px;font-size:13px;color:var(--read)}
.tpl-form input,.tpl-form textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--paper);color:var(--ink)}
/* rows だけだと欄が縦に伸びてしまうので、高さを決める */
.tpl-form textarea{height:74px;min-height:74px;resize:vertical;line-height:1.5}
.tf-pages{display:grid;gap:10px;background:#fafbfd;border:1px solid var(--line);border-radius:11px;padding:14px 15px}
.tf-pages > .sub{margin:-4px 0 2px}
.tf-page{display:grid;grid-template-columns:92px 1fr 1fr;gap:10px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:11px 12px}
.tf-page .fm{grid-column:1 / -1}
.tf-pages .add-page{justify-self:start;border:1px dashed #b9cbe2;background:#fff;color:var(--navy2);
  border-radius:9px;padding:8px 15px;font-size:13px;cursor:pointer}
.tf-pages .add-page:hover{background:#f5f9ff}
@media (max-width:820px){
  .tf-row,.tf-page{grid-template-columns:1fr}
}

/* 原稿ができたあとは画面が左右2つに割れる。狭い左の欄でイラストの場所を空けておくと
   テンプレートが1列になって読めないので、この時だけイラストを外す（2026-09-08） */
.has-report .make-box{padding-right:20px}
.has-report .mb-art{display:none}

/* 2画面の左側は幅が狭い。ここでは表紙を出さず、名前と枚数だけにする。
   表紙は最初に作る時に見せてある。作り直す時に知りたいのは「どの型か」なので */
.has-report .mt-thumb{display:none}
.has-report .mt-card{padding:9px 11px}

/* 営業台本・商品資料 2026-09-14 */
.material-text{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.9;max-width:100%}
select{max-width:100%;width:100%;padding:12px;border:1px solid #d7e1ec;border-radius:8px;background:white;color:#173753;font:inherit}
.demo-intro{padding:18px 24px;margin:18px 0;background:#f5f9fc;border-left:4px solid #c6a454;border-radius:8px;line-height:1.8}
.make-box input[type=number]{max-width:150px}


/* 営業台本専用。元の写真・太い手書き・金色アクセントを一体化した帯。 */
.pick-hero.pick-hero-script{background:#fbfcfe;padding-left:502px;min-height:260px}
.pick-hero-script::before{display:none}
.pick-hero-script .script-hero-scene{position:absolute;left:0;top:0;bottom:0;width:490px;overflow:hidden}
.script-hero-scene img{display:block;width:100%;height:100%;object-fit:fill;object-position:left center}
.pick-hero-script .script-flow-note{width:240px;text-align:center;padding:14px 12px}
.script-flow-note p{font-size:15px;font-weight:700;color:#183354;margin:0}
.script-flow-note img{display:block;width:100%;height:95px;object-fit:cover;margin:2px 0}
.script-flow-note span{font-size:12px;color:#425b6b}
@media(max-width:1450px){
 .pick-hero.pick-hero-script{padding:265px 24px 24px;gap:20px}
 .pick-hero-script .script-hero-scene{height:245px;bottom:auto;width:490px;max-width:100%}
 .pick-hero-script .ph-txt h1{font-size:25px}
}
@media(max-width:700px){
 .pick-hero.pick-hero-script{flex-direction:column;align-items:stretch;padding:0 18px 20px}
 .pick-hero-script .script-hero-scene{position:relative;width:calc(100% + 36px);max-width:none;left:-18px;aspect-ratio:2/1;height:auto;flex:none}
 .pick-hero-script .script-flow-note{width:100%;box-sizing:border-box}
}