/* ============================================================
THEME A — Editorial Botanical Luxury（A案 統合・SPA）
母艦：theme_a の :root / iPad / screen / topbar / rec / seg /
chips / 松竹梅 / gcard / tray を1つに集約
============================================================ */
:root{
--paper:#ffffff; --paper-2:#f8f8f8; --paper-3:#f0f0f0; --card:#ffffff;
--green:#1a1a1a; --green-2:#333333; --green-mid:#666666; --green-soft:#c9c9c9;
--brass:#ed5b23; --brass-2:#f0754a;
--terra:#ed5b23; --terra-2:#f0754a;
--hair:rgba(0,0,0,.12); --hair-strong:rgba(0,0,0,.26);
--ink:#000000; --ink-soft:#555555; --ink-faint:#999999;
--serif-disp:'Heebo','Josefin Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Yu Gothic Medium','游ゴシック Medium',YuGothic,'游ゴシック','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Arial,'メイリオ',Meiryo,sans-serif;
--serif-jp:'Heebo','Josefin Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Yu Gothic Medium','游ゴシック Medium',YuGothic,'游ゴシック','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Arial,'メイリオ',Meiryo,sans-serif;
--ui:'Heebo','Josefin Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Yu Gothic Medium','游ゴシック Medium',YuGothic,'游ゴシック','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Arial,'メイリオ',Meiryo,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow:hidden; }
body{
background:var(--paper);
height:100%; font-family:var(--ui); color:var(--ink);
-webkit-font-smoothing:antialiased;
}
/* ============ v4：固定キャンバス（1600×900 の transform:scale）を撤去し流体レイアウトへ ============ */
.ipad{ width:100%; height:100%; padding:0; background:none; border:none; border-radius:0; box-shadow:none; }
.ipad::before, .ipad::after{ display:none; }
.screen{
width:100%; height:100%; overflow:hidden;
border-radius:0; background:var(--paper);
position:relative; display:flex; flex-direction:column;
}
/* 高さは html/body の 100% に統一する（dvh を重ねると iPad の回転・ツールバー開閉で
実表示領域とズレ、下に帯が出たり中身が見切れる） */
/* ============ ビュー切替（フェード） ============ */
.view{
position:absolute; inset:0; display:none;
flex-direction:column;
opacity:0; transition:opacity .42s ease;
}
.view.active{ display:flex; }
.view.shown{ opacity:1; }
/* ===========================================================
トップバー（共通母艦）
=========================================================== */
.topbar{
flex:0 0 auto; display:grid;
grid-template-columns: 232px 1fr auto;
align-items:center; gap:22px;
padding:13px 22px 12px;
background:linear-gradient(180deg,#ffffff, #f6f6f6);
border-bottom:1px solid var(--hair);
}
.brand{ display:flex; align-items:center; gap:11px; }
.brand .leaf{ flex:0 0 auto; }
.brand .wm{ line-height:1; }
.brand .wm .name{
font-family:var(--serif-disp); font-size:24px; letter-spacing:.5px;
color:var(--green); font-weight:400;
}
.brand .wm .sub{
font-family:var(--ui); font-size:9.5px; letter-spacing:3.2px;
color:var(--ink-faint); text-transform:uppercase; margin-top:3px;
}
.brand .wm .sub b{ color:var(--brass); font-weight:600; letter-spacing:2px; }
.context{ text-align:center; }
.context .title{
font-family:var(--serif-jp); font-size:19px; color:var(--green);
letter-spacing:1px; line-height:1.1;
}
.context .meta{
font-family:var(--ui); font-size:11px; color:var(--ink-soft);
margin-top:4px; letter-spacing:.4px;
}
.context .meta .div{ color:var(--hair-strong); margin:0 8px; }
.topright{ display:flex; align-items:center; gap:18px; }
/* ===========================================================
本体レイアウト（databank）— サイドバー開閉トグル対応で flex 化
=========================================================== */
.body{ flex:1 1 auto; display:flex; min-height:0; }
.filters{
flex:0 0 282px; width:282px; min-width:0;
background:linear-gradient(180deg,#f8f8f8,#efefef);
border-right:1px solid var(--hair);
padding:16px 18px 14px;
display:flex; flex-direction:column; gap:14px; overflow:hidden;
transition:flex-basis .38s ease, width .38s ease, padding .38s ease;
}
.filters.collapsed{ flex-basis:0; width:0; padding-left:0; padding-right:0; border-right-width:0; }
.fgroup .lbl{
font-family:var(--ui); font-size:10px; letter-spacing:2.6px;
color:var(--ink-faint); text-transform:uppercase;
display:flex; align-items:center; gap:8px; margin-bottom:9px;
}
.fgroup .lbl::after{ content:""; flex:1; height:1px; background:var(--hair); }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
font-family:var(--serif-jp); font-size:13px; letter-spacing:.4px;
color:var(--ink-soft);
background:var(--card); border:1px solid var(--hair);
border-radius:4px; padding:5px 13px; cursor:pointer; line-height:1.3;
transition:background .15s, color .15s, border-color .15s;
}
.chip:hover{ border-color:var(--green-soft); }
.chip.on{
color:#f2f2f2; background:var(--green); border-color:var(--green);
box-shadow:0 3px 9px -5px rgba(0,0,0,.8);
}
.chip.on.brass{
background:linear-gradient(180deg,var(--brass-2),var(--brass));
border-color:var(--brass); color:#fff;
}
/* ソフトタグ（やりたいことから探す）：brass系の控えめな縁で通常チップと区別 */
.chips[data-softtags] .chip{ border-color:rgba(237,91,35,.35); }
.chips[data-softtags] .chip:hover{ border-color:var(--brass); }
.stm{ display:flex; gap:7px; }
.stm .pill{
flex:1; text-align:center; cursor:pointer;
border:1px solid var(--hair); border-radius:4px; padding:9px 0 8px;
background:var(--card); transition:background .15s, border-color .15s;
}
.stm .pill:hover{ border-color:var(--green-soft); }
.stm .pill .k{ font-family:var(--serif-jp); font-size:19px; color:var(--ink-soft); line-height:1; display:block; }
.stm .pill .r{ font-family:var(--ui); font-size:8.5px; letter-spacing:1.5px; color:var(--ink-faint); margin-top:5px; text-transform:uppercase; }
.stm .pill.on{ background:var(--green); border-color:var(--green); box-shadow:0 4px 11px -6px rgba(0,0,0,.8); }
.stm .pill.on .k{ color:#f5f5f5; }
.stm .pill.on .r{ color:var(--green-soft); }
/* ギャラリー */
.gallery{ flex:1 1 auto; min-width:0; padding:14px 22px 0; display:flex; flex-direction:column; min-height:0; background:var(--paper); }
.ftoggle{
display:flex; align-items:center; gap:6px;
font-family:var(--ui); font-size:11px; letter-spacing:.6px; color:var(--green);
background:var(--card); border:1px solid var(--hair-strong); border-radius:4px;
padding:6px 11px; cursor:pointer; transition:background .16s, border-color .16s, color .16s;
}
.ftoggle:hover{ border-color:var(--green); }
.ftoggle.off{ color:var(--ink-soft); background:var(--paper-2); border-style:dashed; }
.ghead{
display:flex; align-items:flex-end; justify-content:space-between;
padding-bottom:11px; margin-bottom:12px; border-bottom:1px solid var(--hair);
}
.crumb{ display:flex; align-items:center; gap:14px; }
.crumb .count{ font-family:var(--ui); font-size:11px; color:var(--ink-soft); letter-spacing:.4px; }
.crumb .count b{ font-family:var(--serif-disp); font-size:21px; color:var(--green); font-weight:400; margin-right:1px; vertical-align:-1px; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:max-content; align-content:start; gap:14px; flex:1 1 auto; min-height:0; overflow-y:auto; padding-bottom:18px; }
.gcard{
background:var(--card); border:1px solid var(--hair);
border-radius:4px; overflow:hidden; display:flex; flex-direction:column;
box-shadow:0 6px 18px -14px rgba(0,0,0,.5);
transition:box-shadow .2s, border-color .2s, transform .2s;
}
.gcard.is-saved{ border-color:rgba(237,91,35,.55); box-shadow:0 10px 26px -14px rgba(237,91,35,.65); }
.photo{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
.photo::after{
content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:
radial-gradient(130% 90% at 72% -8%, rgba(255,255,255,.34), transparent 52%),
radial-gradient(100% 70% at 20% 0%, rgba(255,255,255,.18), transparent 50%),
linear-gradient(0deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,.10) 30%, transparent 48%);
}
.photo::before{
content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
mix-blend-mode:overlay;
}
.photo svg{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; }
.save{
position:absolute; top:9px; right:9px; z-index:4;
width:26px; height:26px; border-radius:4px;
background:rgba(255,255,255,.85); backdrop-filter:blur(3px);
border:1px solid rgba(255,255,255,.5);
display:flex; align-items:center; justify-content:center; cursor:pointer;
box-shadow:0 4px 10px -6px rgba(0,0,0,.5);
transition:transform .14s, background .14s;
}
.save:hover{ transform:scale(1.08); }
.save:active{ transform:scale(.92); }
.save.saved{ background:linear-gradient(180deg,var(--brass-2),var(--brass)); border-color:var(--brass); }
.meta{
flex:0 0 auto; padding:9px 12px 10px; border-top:1px solid var(--hair);
display:flex; flex-direction:column; gap:6px;
background:linear-gradient(180deg,#ffffff,#f8f8f8);
}
.meta .row{ display:flex; align-items:center; justify-content:space-between; }
.tags{ display:flex; gap:5px; }
.tags .t{ font-family:var(--ui); font-size:9px; letter-spacing:.6px; color:var(--green-mid); background:var(--paper-2); border:1px solid var(--hair); border-radius:5px; padding:2px 6px; }
.tags .t.b{ color:var(--brass); border-color:rgba(237,91,35,.4); }
/* ===========================================================
HOME ビュー
=========================================================== */
.today{ text-align:center; }
.today .d{ font-family:var(--serif-jp); font-size:18px; color:var(--green); letter-spacing:1.5px; line-height:1.1; }
.home-right{ display:flex; align-items:center; gap:16px; }
.who{ display:flex; align-items:center; gap:10px; }
.who .av{
width:34px; height:34px; border-radius:50%;
background:linear-gradient(180deg,var(--green-2),var(--green));
display:flex; align-items:center; justify-content:center;
font-family:var(--serif-disp); font-size:15px; color:#f2f2f2;
box-shadow:0 3px 8px -4px rgba(0,0,0,.7);
}
.who .tx{ line-height:1.1; }
.who .tx .nm{ font-family:var(--serif-jp); font-size:14px; color:var(--green); letter-spacing:.5px; }
.who .tx .rl{ font-family:var(--ui); font-size:9px; color:var(--ink-faint); letter-spacing:1.6px; text-transform:uppercase; margin-top:3px; }
/* アカウントメニュー（佐藤さんチップ） */
.home-right{ position:relative; }
.who{ cursor:pointer; padding:5px 9px; margin:-5px -9px; border-radius:4px; transition:background .15s; }
.who:hover{ background:rgba(0,0,0,.07); }
.who .whochev{ color:var(--ink-faint); transition:transform .15s; }
.who.open .whochev{ transform:rotate(180deg); }
.whomenu{
position:absolute; top:calc(100% + 10px); right:0; z-index:80;
min-width:238px; background:var(--paper); border:1px solid var(--hair-strong);
border-radius:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45); padding:6px;
}
.whomenu .mhead{ padding:10px 12px 9px; border-bottom:1px solid var(--hair); }
.whomenu .mhead .co{ font-family:var(--ui); font-size:9px; letter-spacing:1.4px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:5px; }
.whomenu .mhead .nm{ font-family:var(--serif-jp); font-size:15px; color:var(--green); letter-spacing:.5px; }
.whomenu .mhead .nm .rl{ font-family:var(--ui); font-size:9px; color:var(--ink-faint); letter-spacing:1.4px; text-transform:uppercase; margin-left:7px; }
.whomenu .mitem{
display:flex; align-items:center; gap:9px; width:100%; margin-top:4px;
background:none; border:none; cursor:pointer; text-align:left;
font-family:var(--serif-jp); font-size:13px; color:var(--ink);
padding:9px 12px; border-radius:4px; letter-spacing:.4px;
}
.whomenu .mitem:hover{ background:rgba(0,0,0,.07); }
.whomenu .mitem svg{ color:var(--green-mid); flex:0 0 auto; }
.whomenu .mnote{ font-family:var(--ui); font-size:8.5px; letter-spacing:1.2px; color:var(--ink-faint); text-transform:uppercase; padding:8px 12px 5px; border-top:1px solid var(--hair); margin-top:4px; }
.home-body{ flex:1 1 auto; min-height:0; display:grid; grid-template-rows: 1fr; }
.hero{
position:relative; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:22px;
padding:18px 22px 8px; min-height:0; overflow:hidden;
}
.hero .botanic{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; }
.hero .inner{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; }
.recbtn{
position:relative; width:240px; height:240px; border-radius:50%;
border:none; cursor:pointer;
background:radial-gradient(circle at 38% 30%, #f28a5e 0%, var(--terra) 48%, #c94d1e 100%);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
box-shadow:
0 2px 0 rgba(255,255,255,.18) inset,
0 0 0 1px rgba(201,77,30,.4),
0 26px 50px -18px rgba(237,91,35,.7),
0 8px 22px -10px rgba(130,45,12,.45);
transition:transform .16s;
}
.recbtn:hover{ transform:scale(1.025); }
.recbtn:active{ transform:scale(.97); }
.recbtn::before{
content:""; position:absolute; inset:-14px; border-radius:50%;
border:2px solid rgba(237,91,35,.45); animation:halo 2.6s ease-out infinite;
}
@keyframes halo{
0%{ transform:scale(.92); opacity:.7; }
70%{ transform:scale(1.12); opacity:0; }
100%{ transform:scale(1.12); opacity:0; }
}
.recbtn::after{ content:""; position:absolute; inset:14px; border-radius:50%; border:1px solid rgba(255,255,255,.30); }
.recbtn .micwrap{ width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
.recbtn .lbl{ font-family:var(--serif-jp); font-size:20px; color:#ffffff; letter-spacing:2px; line-height:1.1; text-shadow:0 1px 5px rgba(130,45,12,.45); }
.hero .subtxt{ font-family:var(--serif-jp); font-size:14px; color:var(--ink-soft); letter-spacing:.6px; text-align:center; line-height:1.5; }
.hero .subtxt b{ color:var(--green); font-weight:600; }
/* ===========================================================
AFTER ビュー
=========================================================== */
.rec.done{
display:flex; align-items:center; gap:13px;
background:linear-gradient(180deg,#f8f8f8,#efefef);
border:1px solid var(--hair-strong); border-radius:8px;
padding:8px 16px 8px 13px; box-shadow:0 1px 0 rgba(255,255,255,.7) inset; position:relative;
}
.rec.done .stopmark{ width:13px; height:13px; border-radius:3px; background:var(--ink-faint); flex:0 0 auto; }
.rec.done .wave-static{ display:flex; align-items:flex-end; gap:2.5px; height:20px; }
.rec.done .wave-static span{ width:2.5px; border-radius:2px; background:var(--green-soft); opacity:.8; }
.rec.done .tcol{ display:flex; flex-direction:column; line-height:1; }
.rec.done .timer{ font-family:var(--serif-disp); font-size:22px; color:var(--green); letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.rec.done .tlabel{ font-family:var(--ui); font-size:9px; color:var(--ink-soft); letter-spacing:1.2px; margin-top:4px; display:flex; align-items:center; gap:5px; }
.rec.done .tlabel .ok{ width:12px; height:12px; border-radius:50%; background:linear-gradient(180deg,var(--brass-2),var(--brass)); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.topbtn{ font-family:var(--ui); font-size:13px; letter-spacing:.6px; color:var(--green); background:transparent; border:1px solid var(--hair-strong); border-radius:4px; padding:9px 16px; cursor:pointer; display:flex; align-items:center; gap:7px; transition:background .18s, border-color .18s; }
.topbtn:hover{ background:rgba(0,0,0,.06); border-color:var(--green); }
.topbtn:active{ transform:translateY(1px); }
.after-body{ flex:1 1 auto; display:grid; grid-template-columns: 1fr; min-height:0; background:var(--paper); }
/* 16:9 化で横幅が広がったため、文書は読みやすい幅に絞って中央寄せ */
.doc{ width:100%; max-width:1240px; margin:0 auto; padding:13px 24px 14px; display:flex; flex-direction:column; gap:10px; min-height:0; overflow:hidden; background:var(--paper); }
.dochead{ display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid var(--hair); }
.dochead .htxt .ttl{ font-family:var(--serif-disp); font-size:27px; color:var(--green); letter-spacing:.5px; line-height:1; font-weight:400; }
.dochead .htxt .ttl .jp{ font-family:var(--serif-jp); font-size:22px; }
.dochead .htxt .ttl .x{ color:var(--brass); font-family:var(--serif-disp); margin:0 6px; }
.dochead .htxt .sub{ font-family:var(--ui); font-size:11px; color:var(--ink-soft); letter-spacing:.4px; margin-top:7px; line-height:1.4; }
.dochead .htxt .sub b{ color:var(--green-mid); font-weight:600; }
.dochead .stamp{ text-align:right; flex:0 0 auto; padding-left:18px; }
.dochead .stamp .no{ font-family:var(--serif-disp); font-size:13px; color:var(--ink-faint); letter-spacing:1px; }
.dochead .stamp .dt{ font-family:var(--ui); font-size:10px; color:var(--ink-faint); letter-spacing:.6px; margin-top:4px; }
.summary{ background:linear-gradient(180deg,#ffffff,#f8f8f8); border:1px solid var(--hair); border-left:none; border-radius:8px; padding:13px 16px 14px 18px; position:relative; }
.summary::before{ content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--green-mid),var(--green)); }
.summary .lbl{ font-family:var(--ui); font-size:9.5px; letter-spacing:2.2px; color:var(--green-mid); text-transform:uppercase; margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.summary .lbl .src{ font-family:var(--ui); font-size:8.5px; letter-spacing:.8px; color:var(--ink-faint); text-transform:none; margin-left:auto; }
.summary p{ font-family:var(--serif-jp); font-size:13px; line-height:1.7; color:var(--ink); letter-spacing:.2px; }
.summary p b{ color:var(--green); font-weight:600; box-shadow:inset 0 -7px 0 rgba(237,91,35,.16); }
.struct{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.field{ background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:11px 14px 12px; display:flex; flex-direction:column; gap:6px; }
.field .fl{ font-family:var(--ui); font-size:9px; letter-spacing:2.2px; color:var(--ink-faint); text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.field .fl::after{ content:""; flex:1; height:1px; background:var(--hair); }
.field .fv{ font-family:var(--serif-jp); font-size:13px; line-height:1.55; color:var(--ink); letter-spacing:.2px; }
.field .fv .em{ color:var(--green); font-weight:600; }
.field.budget .stm{ display:flex; gap:6px; margin-top:1px; }
.field.budget .stm .pill{ flex:1; text-align:center; border:1px solid var(--hair); border-radius:4px; padding:6px 0 5px; background:var(--paper-2); }
.field.budget .stm .pill .k{ font-family:var(--serif-jp); font-size:16px; color:var(--ink-faint); line-height:1; display:block; }
.field.budget .stm .pill .r{ font-family:var(--ui); font-size:7.5px; letter-spacing:1.2px; color:var(--ink-faint); margin-top:4px; text-transform:uppercase; }
.field.budget .stm .pill.on{ background:var(--green); border-color:var(--green); box-shadow:0 4px 11px -6px rgba(0,0,0,.8); }
.field.budget .stm .pill.on .k{ color:#f5f5f5; }
.field.budget .stm .pill.on .r{ color:var(--green-soft); }
.field.budget .bnote{ font-family:var(--ui); font-size:9.5px; color:var(--ink-faint); letter-spacing:.3px; margin-top:2px; }
.field.next .fv{ display:flex; flex-direction:column; gap:5px; }
.field.next .act{ display:flex; align-items:flex-start; gap:8px; }
.field.next .act .bx{ width:13px; height:13px; border-radius:3px; flex:0 0 auto; margin-top:2px; border:1px solid var(--green-mid); background:var(--card); }
.field.next .act .bx.done{ background:linear-gradient(180deg,var(--brass-2),var(--brass)); border-color:var(--brass); display:flex; align-items:center; justify-content:center; }
.field.next .act span{ font-family:var(--serif-jp); font-size:12px; line-height:1.4; }
.refs{ display:flex; flex-direction:column; gap:9px; }
.refs .rhead{ display:flex; align-items:baseline; justify-content:space-between; }
.refs .rhead .rt{ font-family:var(--serif-jp); font-size:14px; color:var(--green); letter-spacing:.4px; }
.refs .rhead .rt b{ font-family:var(--serif-disp); color:var(--brass); font-size:18px; margin:0 2px; }
.refs .rhead .rs{ font-family:var(--ui); font-size:9.5px; color:var(--ink-faint); letter-spacing:.6px; }
.refrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; min-height:120px; }
.refcard{ background:var(--card); border:1px solid var(--hair); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 16px -14px rgba(0,0,0,.5); }
.refcard .ph{ position:relative; height:74px; overflow:hidden; }
.refcard .ph svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.refcard .ph::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(0,0,0,.42) 0%, transparent 46%); }
.refcard .ph .rbadge2{ position:absolute; top:7px; left:7px; z-index:2; font-family:var(--ui); font-size:8px; letter-spacing:.8px; background:linear-gradient(180deg,var(--brass-2),var(--brass)); color:#fff; border-radius:5px; padding:2px 7px; text-transform:uppercase; box-shadow:0 3px 8px -4px rgba(0,0,0,.5); }
.refcard .rm{ padding:8px 11px 10px; display:flex; flex-direction:column; gap:5px; border-top:1px solid var(--hair); background:linear-gradient(180deg,#ffffff,#f8f8f8); }
.refcard .rm .t{ font-family:var(--serif-jp); font-size:12px; color:var(--green); letter-spacing:.2px; line-height:1.3; }
.refcard .rm .d{ font-family:var(--ui); font-size:9.5px; color:var(--ink-soft); letter-spacing:.2px; line-height:1.25; }
.refcard .rm .tg{ display:flex; gap:4px; margin-top:1px; }
.refcard .rm .tg .t2{ font-family:var(--ui); font-size:8px; letter-spacing:.5px; color:var(--green-mid); background:var(--paper-2); border:1px solid var(--hair); border-radius:4px; padding:2px 5px; }
.refcard .rm .tg .t2.b{ color:var(--brass); border-color:rgba(237,91,35,.4); }
.refs .empty-refs{ font-family:var(--serif-jp); font-size:13px; color:var(--ink-faint); letter-spacing:.4px; font-style:italic; padding:18px; text-align:center; border:1.5px dashed var(--hair-strong); border-radius:11px; }
/* ===========================================================
オーバーレイ（解析中・送信完了）
=========================================================== */
.overlay{
position:absolute; inset:0; z-index:50;
display:none; align-items:center; justify-content:center;
background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
opacity:0; transition:opacity .3s ease;
}
.overlay.show{ display:flex; opacity:1; }
/* 解析中カード */
.analyzing{
width:430px; background:linear-gradient(180deg,#ffffff,#f0f0f0);
border:1px solid var(--hair-strong); border-radius:8px;
padding:34px 36px 30px; text-align:center;
box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.analyzing .ring{ width:74px; height:74px; margin:0 auto 20px; position:relative; }
.analyzing .ring svg{ width:100%; height:100%; animation:spin 1.1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.analyzing .ttl{ font-family:var(--serif-jp); font-size:20px; color:var(--green); letter-spacing:1px; }
.analyzing .sub{ font-family:var(--serif-jp); font-size:13px; color:var(--ink-soft); letter-spacing:.4px; margin-top:9px; line-height:1.6; }
.analyzing .sub b{ color:var(--green); font-weight:600; }
.analyzing .bar{ height:6px; border-radius:4px; background:var(--paper-3); margin-top:20px; overflow:hidden; border:1px solid var(--hair); }
.analyzing .bar .fill{ height:100%; width:0%; border-radius:4px; background:linear-gradient(90deg,var(--green-mid),var(--green)); transition:width .25s linear; }
.analyzing .steps{ font-family:var(--ui); font-size:9.5px; letter-spacing:1.4px; color:var(--ink-faint); text-transform:uppercase; margin-top:13px; }
/* 送信完了モーダル */
.sent{
width:440px; background:linear-gradient(180deg,#ffffff,#f0f0f0);
border:1px solid var(--hair-strong); border-radius:8px;
padding:36px 38px 30px; text-align:center;
box-shadow:0 30px 70px -20px rgba(0,0,0,.7);
}
.sent .check{
width:66px; height:66px; margin:0 auto 18px; border-radius:50%;
background:linear-gradient(180deg,var(--green-2),var(--green));
display:flex; align-items:center; justify-content:center;
box-shadow:0 12px 26px -14px rgba(0,0,0,.85);
animation:pop .4s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
.sent .ttl{ font-family:var(--serif-jp); font-size:21px; color:var(--green); letter-spacing:.8px; }
.sent .msg{ font-family:var(--serif-jp); font-size:13.5px; color:var(--ink-soft); letter-spacing:.3px; margin-top:12px; line-height:1.7; }
.sent .msg b{ color:var(--green); font-weight:600; }
.sent .close{
margin-top:24px; font-family:var(--ui); font-size:13px; letter-spacing:1px;
color:#f2f2f2; background:linear-gradient(180deg,var(--green-2),var(--green));
border:1px solid #141414; border-radius:4px; padding:12px 30px; cursor:pointer;
box-shadow:0 10px 22px -14px rgba(0,0,0,.85);
transition:transform .14s;
}
.sent .close:hover{ transform:translateY(-1px); }
.sent .close:active{ transform:translateY(1px); }
/* ===========================================================
V2 — STEP1：単一商談の磨き込み（追加スタイル）
既存トークン（--green/--brass/--terra/serif系）に揃える
=========================================================== */
/* ---------- ① HOME：3つの入口 ---------- */
/* ① ホーム カルーセル（カバーフロー） */
.carousel{ position:relative; width:100%; max-width:1280px; margin:2px auto 0; }
.cstage{ position:relative; width:100%; height:436px; perspective:1700px; touch-action:pan-y; }
.ccard{
position:absolute; top:0; left:50%; width:340px; height:430px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
padding:30px 26px; border-radius:8px; cursor:pointer; text-align:center; font-family:inherit;
background:linear-gradient(165deg,#578e71,#4a735d); border:1px solid rgba(0,0,0,.2);
box-shadow:0 26px 50px -28px rgba(29,58,42,.5);
transform:translateX(-50%); transform-origin:center center;
transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s, box-shadow .4s;
-webkit-backface-visibility:hidden; backface-visibility:hidden;
}
.ccard .cic{ position:relative; width:112px; height:112px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,247,238,.1); border:1px solid rgba(255,247,238,.22); }
.ccard .ctxt{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.ccard .ctt{ font-family:var(--serif-jp); font-size:40px; line-height:1.3; letter-spacing:1px; color:#f1ece0; }
.ccard .chint{ font-family:var(--ui); font-size:19px; letter-spacing:1.6px; color:#d8c389; opacity:0; }
.ccard .chint .carrow{ display:inline-block; }
.ccard.is-center{ box-shadow:0 40px 72px -26px rgba(29,58,42,.62); }
.ccard.is-center .chint{ animation:hintIn .6s .35s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes hintIn{ 0%{ opacity:0; transform:translateY(8px); } 100%{ opacity:1; transform:translateY(0); } }
.ccard.is-center .chint .carrow{ animation:arrowNudge 1.6s ease-in-out 1.1s infinite; }
@keyframes arrowNudge{ 0%,100%{ transform:translateX(0); opacity:1; } 50%{ transform:translateX(6px); opacity:.75; } }
.ccard--import{ background:linear-gradient(160deg,#e48a6c,#b36f5a); border-color:rgba(0,0,0,.18); }
.ccard--import .cic{ background:rgba(255,247,238,.16); border-color:rgba(255,247,238,.32); position:relative; }
.ccard.is-center .cic::before{ content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,247,238,.42); animation:halo 2.6s ease-out infinite; }
.ccard--import .ctt{ color:#fff7ee; }
.ccard--import .chint{ color:rgba(255,247,238,.92); }
.ccard--databank{ background:linear-gradient(165deg,#578e71,#4a735d); border-color:rgba(0,0,0,.2); }
.ccard--databank .cic{ background:rgba(255,247,238,.1); border-color:rgba(255,247,238,.22); }
.ccard--databank .ctt{ color:#f1ece0; }
.ccard--databank .chint{ color:#d8c389; }
.ccard--edu{ background:linear-gradient(165deg,#e6b257,#b58e4a); border-color:rgba(0,0,0,.18); }
.ccard--edu .cic{ background:rgba(255,247,238,.14); border-color:rgba(255,247,238,.32); }
.ccard--edu .ctt{ color:#fdf8ec; }
.ccard--edu .chint{ color:#f3e7c6; }
/* 中央到達時のアイコン演出 */
.ccard.is-center .cic{ animation:cicPop .55s cubic-bezier(.2,.9,.3,1.4); }
@keyframes cicPop{ 0%{ transform:scale(.82); } 100%{ transform:scale(1); } }
.ccard--databank.is-center .cic .draw{ stroke-dasharray:20 20; stroke-dashoffset:20; animation:iconDraw 2.6s .2s ease-in-out infinite; }
@keyframes iconDraw{ 0%{ stroke-dashoffset:20; } 45%{ stroke-dashoffset:0; } 70%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-20; } }
.ccard--import.is-center .cic .wave path{ transform-box:fill-box; transform-origin:center; animation:wavePulse 1.15s ease-in-out infinite; }
.ccard--import.is-center .cic .wave path:nth-child(2){ animation-delay:.15s; }
.ccard--import.is-center .cic .wave path:nth-child(3){ animation-delay:.3s; }
.ccard--import.is-center .cic .wave path:nth-child(4){ animation-delay:.45s; }
@keyframes wavePulse{ 0%,100%{ transform:scaleY(.55); } 50%{ transform:scaleY(1.15); } }
.ccard--edu.is-center .cic .play{ transform-box:fill-box; transform-origin:center; animation:playPulse 1.4s ease-in-out .3s infinite; }
@keyframes playPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.7; } }
.ccard--edu.is-center .cic svg{ animation:bookFloat 2.8s ease-in-out infinite; }
@keyframes bookFloat{ 0%,100%{ transform:translateY(1.5px); } 50%{ transform:translateY(-1.5px); } }
.cnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:40; width:46px; height:46px; border-radius:50%; background:var(--paper); border:1px solid var(--hair); box-shadow:0 8px 20px -10px rgba(0,0,0,.5); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--green); }
.cnav:hover{ background:#fff; }
.cprev{ left:-6px; } .cnext{ right:-6px; }
.cdots{ display:flex; gap:9px; justify-content:center; margin-top:20px; }
.cdot{ width:8px; height:8px; border-radius:50%; background:var(--hair); border:none; cursor:pointer; padding:0; transition:all .3s; }
.cdot.on{ background:var(--brass); width:22px; border-radius:4px; }
.entries{ display:flex; flex-direction:column; gap:14px; width:760px; max-width:90%; }
.entry{
position:relative; display:flex; align-items:center; gap:20px;
border:1px solid var(--hair); border-radius:8px; cursor:pointer;
text-align:left; width:100%; font-family:var(--ui);
transition:transform .16s, box-shadow .18s, border-color .18s;
}
.entry:hover{ transform:translateY(-2px); }
.entry:active{ transform:translateY(0); }
.entry .eic{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.entry .etx{ flex:1 1 auto; min-width:0; }
.entry .etx .eh{ font-family:var(--serif-jp); letter-spacing:1px; line-height:1.15; }
.entry .etx .es{ font-family:var(--ui); color:var(--ink-soft); letter-spacing:.4px; margin-top:6px; line-height:1.45; }
.entry .earr{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
/* ① 主役（テラコッタ） */
.entry.primary{
padding:24px 28px;
background:radial-gradient(120% 140% at 12% 10%, #f28a5e 0%, var(--terra) 52%, #c94d1e 120%);
border-color:rgba(201,77,30,.5);
box-shadow:0 22px 46px -22px rgba(237,91,35,.7), 0 1px 0 rgba(255,255,255,.16) inset;
}
.entry.primary:hover{ box-shadow:0 28px 54px -22px rgba(237,91,35,.78), 0 1px 0 rgba(255,255,255,.16) inset; }
.entry.primary .eic{ width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.18); position:relative; }
.entry.primary .eic::before{ content:""; position:absolute; inset:-9px; border-radius:50%; border:2px solid rgba(237,91,35,.45); animation:halo 2.6s ease-out infinite; }
.entry.primary .etx .eh{ font-size:24px; color:#ffffff; text-shadow:0 1px 5px rgba(130,45,12,.4); }
.entry.primary .etx .es{ color:rgba(255,255,255,.86); font-size:13px; }
.entry.primary .earr{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); }
/* ②③ 従（紙カード） */
.entry.secondary, .entry.tertiary{
padding:18px 22px; background:linear-gradient(180deg,#ffffff,#f5f5f5);
box-shadow:0 8px 22px -16px rgba(0,0,0,.5);
}
.entry.secondary:hover, .entry.tertiary:hover{ border-color:var(--green-soft); box-shadow:0 14px 28px -16px rgba(0,0,0,.55); }
.entry.secondary .eic, .entry.tertiary .eic{ width:50px; height:50px; border-radius:8px; background:var(--paper-2); border:1px solid var(--hair); }
.entry.tertiary .eic{ background:linear-gradient(180deg,#21402f,#222222); border-color:rgba(0,0,0,.2); }
.entry .etx .eh{ font-size:18px; color:var(--green); }
.entry.secondary .earr, .entry.tertiary .earr{ width:28px; height:28px; }
.entry .ekey{
position:absolute; top:14px; right:18px; font-family:var(--serif-disp); font-style:italic;
font-size:13px; letter-spacing:1px;
}
.entry.primary .ekey{ color:rgba(255,255,255,.7); }
.entry.secondary .ekey, .entry.tertiary .ekey{ color:var(--brass); }
/* 取り込みファイルチップ（②）+ 解析オーバーレイは既存#overlay-analyzingを再利用 */
.filechip{
display:inline-flex; align-items:center; gap:9px; margin:0 auto;
font-family:var(--ui); font-size:13px; color:var(--green); letter-spacing:.4px;
background:var(--card); border:1px solid var(--hair-strong); border-radius:4px;
padding:9px 15px; box-shadow:0 6px 16px -12px rgba(0,0,0,.5);
animation:pop .35s cubic-bezier(.2,.9,.3,1.3);
}
.filechip .fi{ width:26px; height:26px; border-radius:7px; background:var(--paper-2); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.filechip .fn{ font-family:var(--serif-jp); }
.filechip .ft{ font-family:var(--ui); font-size:9px; letter-spacing:1.4px; color:var(--terra); text-transform:uppercase; border:1px solid rgba(237,91,35,.4); border-radius:5px; padding:2px 6px; }
/* ---------- ② DATABANK：お客様提示モード（ビューア） ---------- */
.photo{ cursor:zoom-in; } /* 画像タップでビューアが開くことの示唆 */
/* お客様提示モード：全画面ビューア */
.viewer{
position:absolute; inset:0; z-index:60; display:none;
flex-direction:column;
background:linear-gradient(180deg,#0f0f0f,#181818);
opacity:0; transition:opacity .3s ease;
}
.viewer.show{ display:flex; opacity:1; }
.viewer .vtop{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 22px 12px; }
.viewer .vbrand{ display:flex; align-items:center; gap:9px; font-family:var(--serif-disp); font-size:17px; color:rgba(255,255,255,.9); letter-spacing:.5px; }
.viewer .vtools{ display:flex; align-items:center; gap:10px; }
.viewer .vclose{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#eeeeee; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
.viewer .vclose:hover{ background:rgba(255,255,255,.16); }
/* v3.3：ビューアからお気に入り登録できる★ボタン（×との押し間違え防止のため画像右上に重ねる） */
.viewer .vsave{ position:absolute; top:14px; right:14px; z-index:4; width:44px; height:44px; border-radius:4px; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.28); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .16s, transform .14s; }
.viewer .vsave:hover{ background:rgba(0,0,0,.75); transform:scale(1.06); }
.viewer .vsave:active{ transform:scale(.94); }
.viewer .vsave.saved{ background:linear-gradient(180deg,var(--brass-2),var(--brass)); border-color:var(--brass); }
.viewer .vstage{ flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; gap:22px; padding:6px 60px 10px; position:relative; }
.viewer .vnav{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:52px; height:52px; border-radius:50%;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
color:#f2f2f2; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:background .16s;
}
.viewer .vnav:hover{ background:rgba(255,255,255,.16); }
.viewer .vnav.prev{ left:14px; }
.viewer .vnav.next{ right:14px; }
.vframe{
flex:1 1 0; max-width:1300px; height:100%; position:relative;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.vframe .vimg{
width:100%; flex:1 1 auto; min-height:0; border-radius:8px; overflow:hidden; position:relative;
border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 60px -28px rgba(0,0,0,.8);
background:#1a1a1a;
}
.vframe .vimg svg{ position:absolute; inset:0; width:100%; height:100%; }
/* v3.3：下部はタグ表示（旧・操作説明文とタイトルキャプションは廃止） */
.viewer .vfoot{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0 16px; }
.viewer .vfoot .vt{ font-family:var(--ui); font-size:11.5px; letter-spacing:.8px; color:#e8e8e8; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:5px 13px; }
.viewer .vfoot .vt.b{ color:var(--brass-2); border-color:rgba(237,91,35,.55); }
/* ---------- ③b LIST：案件一覧（Voice Notes 台帳・2026-08-16 追加） ---------- */
.list-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 60px 44px; background:var(--paper); }
.list-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:26px; padding:14px 2px 20px; }
.lback{ display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; cursor:pointer; padding:0; margin-bottom:10px; font-family:var(--ui); font-size:11.5px; font-weight:500; letter-spacing:.12em; color:var(--ink-faint); transition:color .18s; }
.lback:hover{ color:var(--brass); }
.lback svg{ transition:transform .18s; }
.lback:hover svg{ transform:translateX(-3px); }
.list-hero .lk{ font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.3em; color:var(--brass); text-transform:uppercase; margin-bottom:7px; }
.list-hero h2{ margin:0; font-family:var(--ui); font-size:30px; font-weight:600; letter-spacing:.02em; color:var(--ink); line-height:1.2; }
.ltitle{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.list-hero .lsum{ font-family:var(--ui); font-size:12.5px; color:var(--ink-faint); letter-spacing:.06em; }
.list-hero .lsum b{ color:var(--ink); font-weight:600; }
.newrec{
flex:0 0 auto; display:inline-flex; align-items:center; gap:12px;
background:var(--brass); color:#ffffff;
border:1px solid rgba(0,0,0,.4); border-radius:4px; padding:13px 24px 13px 16px; cursor:pointer;
font-family:var(--ui); font-size:13.5px; letter-spacing:.12em;
box-shadow:0 16px 30px -18px rgba(0,0,0,.6); transition:transform .16s, box-shadow .2s;
}
.newrec:hover{ transform:translateY(-1px); box-shadow:0 20px 36px -18px rgba(0,0,0,.65); }
.newrec:active{ transform:translateY(0); }
.newrec .mic{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
/* 2段構成：上＝検索と件数／下＝担当・状態のチップ（1行に詰め込むと幅次第で折り返すため） */
.list-tools{ display:flex; flex-direction:column; align-items:stretch; gap:13px; padding:4px 2px 15px; border-bottom:1px solid var(--hair); }
.lt-top{ display:flex; align-items:center; gap:20px; }
.lt-bot{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.lsearch{ flex:0 1 340px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--hair); padding:7px 2px; transition:border-color .2s; }
.lsearch:focus-within{ border-color:var(--ink); }
.lsearch svg{ flex:0 0 auto; color:var(--ink-faint); }
.lsearch input{ flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent; font-family:var(--ui); font-size:13.5px; letter-spacing:.05em; color:var(--ink); }
.lsearch input::placeholder{ color:var(--ink-faint); }
.lwho{ display:flex; align-items:center; gap:8px; }
.lwho .lbl2{ font-family:var(--ui); font-size:9.5px; font-weight:600; letter-spacing:.22em; color:var(--ink-faint); text-transform:uppercase; margin-right:4px; }
.lchip{ font-family:var(--ui); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); border:1px solid var(--hair); border-radius:999px; padding:6px 14px; cursor:pointer; background:transparent; transition:border-color .16s, background .16s, color .16s; }
.lchip:hover{ border-color:var(--green-soft); color:var(--ink); }
.lchip.on{ background:var(--ink); border-color:var(--ink); color:#ffffff; }
.lcount{ margin-left:auto; font-family:var(--ui); font-size:11px; letter-spacing:.14em; color:var(--ink-faint); }
.lcount b{ color:var(--ink); font-weight:600; }
.lhead{
display:grid; grid-template-columns:minmax(0,1fr) 170px 92px 26px; gap:22px; align-items:center;
padding:18px 2px 9px; font-family:var(--ui); font-size:9px; font-weight:600;
letter-spacing:.26em; color:var(--ink-faint); text-transform:uppercase;
}
.lsort{ background:transparent; border:none; padding:0; margin:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.lsort:hover{ color:var(--ink); }
.lsort.on{ color:var(--ink); }
.lsort .ar{ font-size:8px; letter-spacing:0; }
.lrow{
display:grid; grid-template-columns:minmax(0,1fr) 170px 92px 26px; gap:22px; align-items:center;
width:100%; text-align:left; background:transparent; border:none; border-bottom:1px solid rgba(0,0,0,.07);
padding:19px 2px; cursor:pointer; font-family:var(--ui); position:relative; transition:background .18s;
}
.lrow::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .28s ease; }
.lrow:hover{ background:linear-gradient(90deg, rgba(0,0,0,.025), rgba(0,0,0,0)); }
.lrow:hover::after{ transform:scaleX(1); }
.lrow .lmain{ min-width:0; }
.lrow .lt{ font-family:var(--ui); font-size:16px; font-weight:600; letter-spacing:.01em; color:var(--ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .18s; }
.lrow:hover .lt{ color:var(--brass); }
.lrow .lm{ display:flex; align-items:center; gap:12px; margin-top:6px; font-size:11.5px; letter-spacing:.05em; color:var(--ink-faint); }
.lrow .lm b{ color:var(--ink-soft); font-weight:500; }
.lrow .lm .sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); opacity:.5; }
.lrow .ld{ font-family:var(--ui); font-size:11.5px; letter-spacing:.08em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.lrow .larr{ display:flex; align-items:center; justify-content:center; color:var(--brass); opacity:0; transform:translateX(-4px); transition:opacity .18s, transform .18s; }
.lrow:hover .larr{ opacity:1; transform:translateX(0); }
.lst{ justify-self:start; display:inline-flex; align-items:center; gap:9px; font-family:var(--ui); font-size:12px; font-weight:500; letter-spacing:.04em; white-space:nowrap; color:var(--ink-soft); }
.lst .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.lst.processing{ color:#a06e28; }
.lst.processing .dot{ background:#d99a2b; box-shadow:0 0 0 4px rgba(217,154,43,.16); animation:lstblink 1.5s ease-in-out infinite; }
@keyframes lstblink{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }
.lst.ready{ color:var(--ink-soft); }
.lst.ready .dot{ background:transparent; border:1.5px solid var(--ink-faint); }
.lst.finalized{ color:var(--ink); font-weight:600; }
.lst.finalized .dot{ background:var(--ink); }
.lst.failed{ color:var(--terra); }
.lst.failed .dot{ background:var(--terra); box-shadow:0 0 0 4px rgba(237,91,35,.14); }
.lnores{ padding:52px 0; text-align:center; font-family:var(--ui); font-size:13px; color:var(--ink-faint); letter-spacing:.08em; }
/* ---------- ④b AFTER：構造化エディタ（AI出力v2.2準拠・docxビジュアル版v3の色帯・2026-08-16） ---------- */
.dsec{ background:#1F3864; color:#ffffff; font-family:var(--ui); font-weight:700; font-size:12.5px; letter-spacing:.08em; padding:8px 14px; border-radius:4px; margin:18px 0 10px; }
.docbody .dsec:first-child{ margin-top:2px; }
.dsub{ background:#D9E1F2; color:#1F3864; font-family:var(--ui); font-weight:700; font-size:11.5px; letter-spacing:.05em; padding:6px 14px; border-radius:4px; margin:14px 0 8px; }
.damb{ background:#FFF2CC; color:#6b5410; font-family:var(--ui); font-weight:700; font-size:11.5px; letter-spacing:.05em; padding:6px 14px; border-radius:4px; margin:14px 0 8px; display:flex; align-items:baseline; gap:10px; }
.damb .nt{ font-weight:500; font-size:10px; color:#8a7a3a; letter-spacing:.03em; }
.dtext{ background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:12px 14px; font-family:var(--serif-jp); font-size:13px; color:var(--ink); line-height:1.7; letter-spacing:.2px; }
.addrow{ margin:8px 0 0; font-family:var(--ui); font-size:11px; letter-spacing:.08em; color:var(--ink-soft); background:transparent; border:1px dashed var(--hair-strong); border-radius:6px; padding:7px 14px; cursor:pointer; transition:border-color .16s, color .16s; }
.addrow:hover{ border-color:var(--green-mid); color:var(--ink); }
.dchk{ display:flex; align-items:flex-start; gap:10px; background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:11px 14px; font-family:var(--serif-jp); font-size:13px; line-height:1.55; letter-spacing:.2px; }
.dchk b{ font-weight:600; }
.cbx{ width:15px; height:15px; border-radius:3px; border:1.5px solid #9E9E9E; background:#ffffff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px; transition:background .15s, border-color .15s; }
.cbx.done{ background:#2E7D32; border-color:#2E7D32; }
/* 欄内のインラインチェック（☒/☐）: タップで切替（docxと同じ ☒緑/☐グレー） */
.ibx{ cursor:pointer; color:#9E9E9E; font-weight:600; padding:0 2px; border-radius:3px; transition:color .15s, background .15s; }
.ibx.on{ color:#2E7D32; }
.ibx:hover{ background:rgba(0,0,0,.07); }
/* ---------- 行の追加・削除（2026-09-10 拓也さん指示）----------
条件表だけだった「＋ 行を追加」を kv・check の塊にも出し、行を消せるようにする。
× の出しかたは2通り＝自分で足した行（.is-added）は常時、AIが書いた行は値を空に
したときだけ（memo_editor.js が .show を付け外しする）＝内容の入っている行の隣に
× が並び続ける画面にしない。見た目は添付カードの×（.refcard .rx）と揃える。 */
.rowdel{
position:relative; flex:0 0 auto; width:20px; height:20px; border-radius:50%;
display:none; align-items:center; justify-content:center;
font-size:13px; line-height:1; color:#ffffff;
background:rgba(0,0,0,.4); border:1px solid var(--hair-strong); cursor:pointer;
transition:background .15s, border-color .15s;
}
.rowdel:hover{ background:var(--terra); border-color:var(--terra); }
.rowdel.show{ display:flex; }
.dr-row .rowdel{ margin-top:1px; }
/* 自由記述（★家コンセプト・★好み事例・★嫌な事例などの段落）。.dtext 自体が編集できる箱
なので × はその中に置けない（文字と一緒に消せてしまう）＝外側に重ねる */
.dtextwrap{ position:relative; }
.dtextwrap .dtext{ padding-right:34px; }
.dtextwrap .rowdel{ position:absolute; top:9px; right:9px; }
/* 表の × は見た目だけの列に置く（b.header・b.rows には含めない＝保存形式は変わらない） */
.cond-table th.delcol{ width:28px; padding:0; background:transparent; border:none; }
.cond-table td.delcol{ width:28px; padding:4px 2px; text-align:center; border:none; }
.cond-table td.delcol .rowdel{ margin:0 auto; }
/* 空欄の下書き文字。contenteditable は :empty が当てにならない（一度入力して全部消すと
見えない
が残る）ので、memo_editor.js が .is-blank を付け外しする */
.is-blank::before{ content:attr(data-placeholder); color:var(--ink-faint); font-style:italic; }
/* ---------- ④ AFTER：発注書の3つの顔 + 編集可能 ---------- */
.docseg{ display:flex; gap:0; background:var(--paper-3); border:1px solid var(--hair); border-radius:8px; padding:3px; margin-bottom:2px; }
.docseg button{
flex:1; font-family:var(--ui); font-size:12.5px; letter-spacing:.4px; line-height:1.25;
border:none; background:transparent; color:var(--ink-soft); padding:9px 8px; border-radius:4px; cursor:pointer;
display:flex; flex-direction:column; align-items:center; gap:3px; transition:background .2s, color .2s;
}
.docseg button .ds-en{ font-family:var(--serif-disp); font-style:italic; font-size:9px; letter-spacing:.6px; opacity:.7; }
.docseg button:hover{ color:var(--green); }
.docseg button.active{ background:var(--green); color:#f2f2f2; box-shadow:0 4px 10px -5px rgba(0,0,0,.7); }
.docseg button.active:hover{ color:#f2f2f2; }
.docbody{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.editnote{ font-family:var(--ui); font-size:9.5px; letter-spacing:.6px; color:var(--ink-faint); display:flex; align-items:center; gap:7px; }
.editnote .pen{ color:var(--green-mid); }
/* contenteditable のアフォーダンス */
[contenteditable="true"]{ outline:none; border-radius:6px; transition:box-shadow .15s, background .15s; cursor:text; }
[contenteditable="true"]:hover{ background:rgba(237,91,35,.06); }
[contenteditable="true"]:focus{ box-shadow:0 0 0 2px rgba(237,91,35,.4); background:rgba(255,255,255,.5); }
/* 設計版（プラン依頼メモ） */
.designreq{ display:flex; flex-direction:column; gap:9px; }
/* 3列目（auto）は行を消す × の置き場。× が出ていないときは 0 幅になる（見た目は従来どおり） */
.dr-row{ display:grid; grid-template-columns:118px 1fr auto; gap:12px; align-items:start; background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:11px 14px; }
.dr-row .dk{ font-family:var(--ui); font-size:10px; letter-spacing:1.4px; color:var(--ink-faint); text-transform:uppercase; padding-top:2px; }
.dr-row .dv{ font-family:var(--serif-jp); font-size:13px; color:var(--ink); line-height:1.55; letter-spacing:.2px; }
.dr-row .dv .em{ color:var(--green); font-weight:600; }
.dr-row .dv .pri{ display:flex; flex-direction:column; gap:4px; }
.dr-row .dv .pri .pr{ display:flex; align-items:baseline; gap:8px; }
.dr-row .dv .pri .pr .nn{ font-family:var(--serif-disp); font-size:14px; color:var(--brass); width:18px; }
.drhead{ font-family:var(--ui); font-size:9.5px; letter-spacing:2.2px; color:var(--green-mid); text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.drhead::after{ content:""; flex:1; height:1px; background:var(--hair); }
.drhead .tag{ font-family:var(--ui); font-size:8px; letter-spacing:1px; color:var(--brass); border:1px solid rgba(237,91,35,.4); border-radius:5px; padding:2px 7px; text-transform:none; }
/* お客様版 */
.clientdoc{ display:flex; flex-direction:column; gap:11px; }
.clientdoc .cd-lead{ font-family:var(--serif-jp); font-size:14px; line-height:1.75; color:var(--ink); letter-spacing:.2px; }
.clientdoc .cd-lead b{ color:var(--green); font-weight:600; }
.clientdoc .cd-list{ display:flex; flex-direction:column; gap:7px; }
.clientdoc .cd-item{ display:flex; align-items:flex-start; gap:10px; font-family:var(--serif-jp); font-size:13px; color:var(--ink); line-height:1.5; }
.clientdoc .cd-item .lf{ color:var(--green-mid); flex:0 0 auto; padding-top:1px; }
.clientdoc .cd-sign{ font-family:var(--serif-disp); font-style:italic; font-size:13px; color:var(--ink-soft); text-align:right; letter-spacing:.4px; margin-top:4px; }
/* ⑤ OJT学習カード（AI-FB紐付け） */
.ojt{ background:linear-gradient(180deg,#fcfcfc,#f5f5f5); border:1px solid rgba(237,91,35,.45); border-radius:8px; padding:13px 15px; position:relative; }
.ojt::before{ content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:3px; background:linear-gradient(180deg,var(--brass-2),var(--brass)); }
.ojt .oj-eye{ font-family:var(--ui); font-size:9px; letter-spacing:2px; color:var(--brass); text-transform:uppercase; margin-bottom:8px; padding-left:6px; }
.ojt .oj-fb{ font-family:var(--serif-jp); font-size:12.5px; color:var(--green); letter-spacing:.2px; line-height:1.5; padding-left:6px; margin-bottom:10px; }
.ojt .oj-fb b{ color:var(--brass); font-weight:600; }
.ojt .oj-card{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:10px 12px; cursor:pointer; margin-left:6px; transition:border-color .16s, transform .14s; }
.ojt .oj-card:hover{ border-color:var(--green-soft); transform:translateY(-1px); }
.ojt .oj-card .ot{ width:42px; height:42px; border-radius:4px; flex:0 0 auto; background:linear-gradient(180deg,#21402f,#222222); display:flex; align-items:center; justify-content:center; }
.ojt .oj-card .oinfo{ flex:1 1 auto; min-width:0; }
.ojt .oj-card .oinfo .on{ font-family:var(--serif-jp); font-size:13px; color:var(--green); letter-spacing:.3px; line-height:1.3; }
.ojt .oj-card .oinfo .od{ font-family:var(--ui); font-size:9.5px; color:var(--ink-soft); letter-spacing:.3px; margin-top:4px; }
.ojt .oj-card .play{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; background:linear-gradient(180deg,var(--brass-2),var(--brass)); display:flex; align-items:center; justify-content:center; }
.arclink{ font-family:var(--ui); font-size:10px; letter-spacing:.6px; color:var(--brass); cursor:pointer; display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:2px 0; opacity:.85; transition:opacity .16s; }
.arclink:hover{ opacity:1; }
/* ===========================================================
V3 — 教育コンテンツ（章一覧 / レッスン一覧 / 疑似プレイヤー）
・カード類は旧「学習アーカイブ」の vcard パターンを独立クラス化して継承
・視聴済み/再生位置/倍速は localStorage 保存（本番は Cloud SQL・設計書§6-2）
=========================================================== */
/* レッスンカード（サムネ + 再生アイコン + 時間バッジ） */
.vcard{ background:var(--card); border:1px solid var(--hair); border-radius:8px; overflow:hidden; cursor:pointer; transition:transform .14s, border-color .16s, box-shadow .16s; }
.vcard:hover{ transform:translateY(-2px); border-color:var(--green-soft); box-shadow:0 14px 26px -16px rgba(0,0,0,.5); }
.vthumb{ position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; }
.vthumb .vplay{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -8px rgba(0,0,0,.5); }
.vthumb .vdur{ position:absolute; right:8px; bottom:8px; font-family:var(--ui); font-size:9px; letter-spacing:.5px; color:#ffffff; background:rgba(0,0,0,.55); border-radius:5px; padding:2px 7px; }
.vthumb .vdone{ position:absolute; left:8px; top:8px; display:inline-flex; align-items:center; gap:5px; font-family:var(--ui); font-size:9px; letter-spacing:.8px; color:#fff; background:linear-gradient(180deg,var(--brass-2),var(--brass)); border-radius:6px; padding:3px 8px; box-shadow:0 3px 8px -4px rgba(0,0,0,.5); }
.vthumb .vhalf{ position:absolute; left:8px; top:8px; font-family:var(--ui); font-size:9px; letter-spacing:.6px; color:#ffffff; background:rgba(0,0,0,.55); border-radius:6px; padding:3px 8px; }
.vthumb .vprog{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(0,0,0,.35); }
.vthumb .vprog div{ height:100%; background:linear-gradient(90deg,var(--brass-2),var(--brass)); }
.vmeta{ padding:10px 12px 12px; }
.vmeta .vt{ font-family:var(--serif-jp); font-size:13px; color:var(--green); letter-spacing:.3px; line-height:1.34; }
.vmeta .vcat{ font-family:var(--ui); font-size:9px; letter-spacing:1px; color:var(--brass); margin-top:7px; text-transform:uppercase; }
/* 章一覧 */
.edu-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 40px 30px; background:var(--paper); }
.edu-hero{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:14px 2px 18px; margin-bottom:22px; border-bottom:1px solid var(--hair); }
.edu-hero .ek{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.3em; color:var(--brass); text-transform:uppercase; margin-bottom:8px; }
.edu-hero h2{ margin:0; font-family:var(--ui); font-size:30px; font-weight:600; letter-spacing:.02em; color:var(--ink); line-height:1.2; }
.edu-hero .estat{ font-family:var(--ui); font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em; white-space:nowrap; padding-bottom:4px; }
.edu-hero .estat b{ color:var(--brass); font-weight:600; }
.chgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.chcard{ background:var(--card); border:1px solid var(--hair); border-radius:8px; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; box-shadow:0 6px 18px -14px rgba(0,0,0,.35); transition:transform .18s, border-color .18s, box-shadow .18s; }
.chcard:hover{ transform:translateY(-3px); border-color:rgba(237,91,35,.55); box-shadow:0 20px 38px -18px rgba(0,0,0,.4); }
.chthumb{ position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.chthumb .chno{ position:absolute; right:16px; bottom:4px; font-family:var(--ui); font-style:normal; font-weight:700; font-size:72px; line-height:1; color:rgba(255,255,255,.16); letter-spacing:0; }
.chthumb .chk{ position:absolute; left:16px; top:14px; font-family:var(--ui); font-size:10px; font-weight:600; letter-spacing:.24em; color:rgba(255,255,255,.75); text-transform:uppercase; }
.chthumb .chplay{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -8px rgba(0,0,0,.5); opacity:0; transform:scale(.8); transition:opacity .18s, transform .18s; }
.chcard:hover .chplay{ opacity:1; transform:scale(1); }
.chmeta{ padding:15px 17px 16px; display:flex; flex-direction:column; gap:9px; border-top:none; background:#ffffff; }
.chmeta .cht{ font-family:var(--ui); font-size:15.5px; font-weight:600; color:var(--ink); letter-spacing:.2px; line-height:1.5; min-height:46px; }
.chmeta .chsub{ font-family:var(--ui); font-size:10.5px; color:var(--ink-faint); letter-spacing:.08em; }
.chprog{ display:flex; align-items:center; gap:9px; }
.chprog .pb{ flex:1 1 auto; height:4px; border-radius:2px; background:var(--paper-3); border:none; overflow:hidden; }
.chprog .pf{ height:100%; border-radius:2px; background:var(--brass); }
.chprog .pn{ font-family:var(--ui); font-size:9.5px; color:var(--ink-soft); letter-spacing:.4px; white-space:nowrap; }
/* 章内レッスン一覧 */
.lsn-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 26px 22px; background:var(--paper); }
.lsn-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:13px; margin-bottom:14px; border-bottom:1px solid var(--hair); }
.lsn-desc{ font-family:var(--serif-jp); font-size:13px; color:var(--ink-soft); letter-spacing:.3px; line-height:1.6; }
.resumebtn{ flex:0 0 auto; display:flex; align-items:center; gap:8px; font-family:var(--serif-jp); font-size:14px; letter-spacing:.6px; color:#f2f2f2; background:linear-gradient(180deg,var(--green-2),var(--green)); border:1px solid #141414; border-radius:4px; padding:11px 20px; cursor:pointer; box-shadow:0 10px 22px -14px rgba(0,0,0,.85); transition:transform .14s; }
.resumebtn:hover{ transform:translateY(-1px); }
.resumebtn:active{ transform:translateY(1px); }
.lsngrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
/* 疑似プレイヤー */
.player-body{ flex:1 1 auto; min-height:0; display:flex; }
.pmain{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:12px; padding:16px 22px 14px 26px; background:var(--paper); }
.pscreen{ position:relative; flex:1 1 auto; min-height:0; border-radius:8px; overflow:hidden; border:1px solid rgba(0,0,0,.25); box-shadow:0 24px 50px -26px rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#333333,#222222); }
.pbig{ width:84px; height:84px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -12px rgba(0,0,0,.6); transition:transform .14s; }
.pbig:hover{ transform:scale(1.06); }
.pdone{ position:absolute; right:14px; top:12px; display:inline-flex; align-items:center; gap:6px; font-family:var(--ui); font-size:10px; letter-spacing:1px; color:#fff; background:linear-gradient(180deg,var(--brass-2),var(--brass)); border-radius:7px; padding:5px 11px; box-shadow:0 3px 8px -4px rgba(0,0,0,.5); }
.pmock{ position:absolute; left:14px; bottom:11px; font-family:var(--ui); font-size:9px; letter-spacing:1.6px; color:rgba(255,255,255,.5); text-transform:uppercase; }
.pseek{ flex:0 0 auto; height:9px; border-radius:5px; background:var(--paper-3); border:1px solid var(--hair-strong); overflow:hidden; cursor:pointer; }
.pseek .pfill{ height:100%; width:0%; background:linear-gradient(90deg,var(--green-mid),var(--green)); border-radius:5px; transition:width .2s linear; }
.pctrl{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.ppbtn{ font-family:var(--serif-jp); font-size:14px; letter-spacing:.6px; color:#f2f2f2; background:linear-gradient(180deg,var(--green-2),var(--green)); border:1px solid #141414; border-radius:4px; padding:10px 18px; cursor:pointer; box-shadow:0 8px 18px -12px rgba(0,0,0,.85); transition:transform .14s; }
.ppbtn:active{ transform:translateY(1px); }
.ptime{ font-family:var(--serif-disp); font-size:14px; color:var(--ink-soft); letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.ptime b{ color:var(--green); font-weight:400; }
.pspeed{ display:flex; background:var(--paper-3); border:1px solid var(--hair); border-radius:4px; padding:3px; gap:2px; }
.pspeed button{ font-family:var(--ui); font-size:11px; letter-spacing:.4px; border:none; background:transparent; color:var(--ink-soft); padding:6px 11px; border-radius:2px; cursor:pointer; transition:background .18s, color .18s; }
.pspeed button:hover{ color:var(--green); }
.pspeed button.on{ background:var(--green); color:#f2f2f2; }
.pspeed button.on:hover{ color:#f2f2f2; }
.pnext{ margin-left:auto; font-family:var(--ui); font-size:12px; letter-spacing:.6px; color:var(--green); background:transparent; border:1px solid var(--hair-strong); border-radius:4px; padding:9px 16px; cursor:pointer; transition:background .18s, border-color .18s; }
.pnext:hover{ background:rgba(0,0,0,.06); border-color:var(--green); }
.pnote{ flex:0 0 auto; font-family:var(--ui); font-size:9.5px; color:var(--ink-faint); letter-spacing:.4px; }
.plist{ flex:0 0 300px; border-left:1px solid var(--hair); background:linear-gradient(180deg,#f8f8f8,#efefef); padding:14px 12px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; }
.plitem{ display:grid; grid-template-columns:26px 1fr auto; gap:9px; align-items:center; text-align:left; background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:9px 11px; cursor:pointer; transition:border-color .16s, background .16s; font-family:inherit; }
.plitem:hover{ border-color:var(--green-soft); }
.plitem.on{ border-color:var(--green); background:linear-gradient(180deg,#ffffff,#f5f5f5); box-shadow:0 6px 14px -10px rgba(0,0,0,.5); }
.plitem .plino{ font-family:var(--serif-disp); font-size:12px; color:var(--ink-faint); text-align:center; }
.plitem .plidone{ width:16px; height:16px; margin:0 auto; border-radius:50%; background:linear-gradient(180deg,var(--brass-2),var(--brass)); display:flex; align-items:center; justify-content:center; }
.plitem .plit{ font-family:var(--serif-jp); font-size:12px; color:var(--green); letter-spacing:.2px; line-height:1.35; }
.plitem .plidur{ font-family:var(--ui); font-size:9px; color:var(--ink-faint); letter-spacing:.4px; font-variant-numeric:tabular-nums; }
/* AFTER：参考事例ヘッダの追加ボタン */
.refs .rhead .rhead-r{ display:flex; align-items:center; gap:12px; }
.refs .addrefs{ font-family:var(--ui); font-size:11px; letter-spacing:.6px; color:var(--brass); background:linear-gradient(180deg,#fcfcfc,#f5f5f5); border:1px solid rgba(237,91,35,.45); border-radius:4px; padding:6px 12px; cursor:pointer; transition:background .16s, border-color .16s; }
.refs .addrefs:hover{ border-color:var(--brass); background:#f8f8f8; }
/* ===========================================================
V2.2 — 実写事例パース＋実絞り込み＋実物カウンセリングメモ
=========================================================== */
/* ── v2.2: 実写事例画像(case-img) ─────────────────── */
.photo img.case-img, .tray .thumbs .tn img.case-img,
.refcard .ph img.case-img, .vframe .vimg img.case-img{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block; -webkit-user-drag:none;
}
.photo img.case-img{ z-index:1; }
/* ── v2.2: 26枚グリッド（3列×可変行・スクロール） ── */
.grid{ grid-template-rows:none; grid-auto-rows:max-content; overflow-y:auto; padding-right:4px; }
.gcard .photo{ flex:none; aspect-ratio:9/5; }
.grid-empty{ grid-column:1/-1; padding:40px; text-align:center; color:#8f8f8f; font-size:13px; }
/* ── v2.2: 松竹梅pillが4分割になる幅対策（.filters 内寸約246px÷4≒56px/枚） ── */
.filters .stm{ gap:5px; }
.filters .stm .pill .r{ font-size:7.5px; letter-spacing:.5px; }
/* ── v2.2: 実物カウンセリングメモ形式 ── */
.doc-title{ font-weight:700; font-size:14px; letter-spacing:.02em; margin:2px 0 4px; }
.doc-sec{ font-weight:700; font-size:12.5px; color:var(--green); margin:14px 0 6px; letter-spacing:.04em; }
.doc-sec-note{ font-weight:400; font-size:10.5px; color:#8f8f8f; margin-left:8px; }
.cond-table{ width:100%; border-collapse:collapse; font-size:12px; }
.cond-table th{ text-align:left; font-weight:600; padding:6px 8px; background:rgba(0,0,0,.06); border:1px solid var(--hair); }
.cond-table td{ padding:6px 8px; border:1px solid var(--hair); line-height:1.6; vertical-align:top; }
.cond-table td:first-child{ width:34%; font-weight:600; }
/* ③最終確認事項のチェック行（既存 .act/.bx のCSSは死んだ .field.next スコープにしか無いため新設） */
.designreq .act{ display:flex; align-items:flex-start; gap:8px; }
.designreq .act .bx{ width:13px; height:13px; border-radius:3px; flex:0 0 auto; margin-top:2px; border:1px solid var(--hair); background:#fff; }
.designreq .act .bx.done{ background:var(--brass); border-color:var(--brass); display:flex; align-items:center; justify-content:center; }
.designreq .act span{ font-size:12px; line-height:1.5; }
/* ===========================================================
v3.1 微修正（拓也さんFB 2026-07-12）
=========================================================== */
/* DB① トップバー簡素化：タイトル＋戻るのみ・高さ詰め */
/* v3.5：トップバーを全画面 [戻る（左端固定）][タイトル][右端] の並びに統一 */
#view-databank .topbar, #view-import .topbar, #view-after .topbar,
#view-education .topbar, #view-edu-lessons .topbar, #view-edu-player .topbar{
grid-template-columns:auto 1fr auto; padding:10px 22px;
}
#view-databank .context, #view-import .context, #view-after .context,
#view-education .context, #view-edu-lessons .context, #view-edu-player .context{ text-align:left; }
#view-databank .context .title{ font-family:var(--serif-disp); font-size:23px; letter-spacing:.6px; }
/* メモ画面タイトル＝取り込んだ音声のファイル名（タップで編集可能） */
#after-title[contenteditable]{ cursor:text; display:inline-block; border-radius:7px; padding:3px 8px; margin:-3px -8px; }
#after-title[contenteditable]:hover{ background:rgba(0,0,0,.06); }
#after-title[contenteditable]:focus{ outline:1.5px solid var(--green-mid); background:#ffffff; }
/* DB② タグ検索ボタン拡大 */
.ftoggle{ font-size:13px; padding:9px 14px; }
/* DB⑥ 表示サイズ切替（小6列・中4列＝既定・大3列） */
.grid.size-s{ grid-template-columns:repeat(6,1fr); }
.grid.size-l{ grid-template-columns:repeat(3,1fr); }
.gtools{ display:flex; align-items:center; gap:16px; }
.savedbar{ position:relative; display:flex; align-items:center; font-family:var(--ui); font-size:11.5px; color:var(--ink-soft); letter-spacing:.3px; }
.savedbar b{ font-family:var(--serif-disp); font-size:18px; color:var(--green); font-weight:400; margin:0 1px; }
/* 分割ボタン：左＝箱の名前と件数（絞り込み切替）／右＝▼（箱のメニュー） */
.splitbtn{ display:flex; align-items:stretch; border:1px solid var(--hair-strong); border-radius:4px; overflow:hidden; background:var(--card); }
.splitbtn:hover{ border-color:var(--green); }
.sb-main{
display:flex; align-items:center; gap:7px; min-width:0; cursor:pointer;
font-family:var(--ui); font-size:11.5px; letter-spacing:.3px; color:var(--ink-soft);
background:transparent; border:none; padding:7px 12px; transition:background .16s, color .16s;
}
.sb-main:hover{ background:rgba(0,0,0,.05); }
.sb-star{ flex:0 0 auto; color:var(--brass); }
.sb-nm{ min-width:0; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font-weight:600; }
.sb-ct{ flex:0 0 auto; white-space:nowrap; }
.sb-caret{
flex:0 0 auto; display:flex; align-items:center; justify-content:center; cursor:pointer;
width:30px; background:transparent; border:none; border-left:1px solid var(--hair);
color:var(--ink-soft); transition:background .16s;
}
.sb-caret svg{ transition:transform .16s; }
.sb-caret:hover{ background:rgba(0,0,0,.05); color:var(--ink); }
.savedbar.menu-open .sb-caret svg{ transform:rotate(180deg); }
.splitbtn.on{ background:var(--green); border-color:var(--green); }
.splitbtn.on .sb-main, .splitbtn.on .sb-caret{ color:#e8e8e8; }
.splitbtn.on .sb-nm{ color:#f2f2f2; }
.splitbtn.on .sb-star{ color:var(--brass-2); }
.splitbtn.on .sb-caret{ border-left-color:rgba(255,255,255,.24); }
.splitbtn.on .sb-main:hover, .splitbtn.on .sb-caret:hover{ background:rgba(255,255,255,.12); }
/* 箱のメニュー */
.boxmenu{
position:absolute; top:calc(100% + 8px); left:0; z-index:70; min-width:272px;
background:var(--paper); border:1px solid var(--hair-strong); border-radius:8px;
box-shadow:0 18px 40px -18px rgba(0,0,0,.45); padding:6px;
}
.bm-list{ display:flex; flex-direction:column; gap:2px; }
.bm-item{
display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; text-align:left;
background:none; border:none; border-radius:4px; padding:9px 11px;
font-family:var(--ui); font-size:12.5px; color:var(--ink); letter-spacing:.02em;
}
.bm-item:hover{ background:rgba(0,0,0,.06); }
.bm-item .bd{ width:7px; height:7px; border-radius:50%; background:transparent; flex:0 0 auto; }
.bm-item.on .bd{ background:var(--brass); }
.bm-item.on .bn{ font-weight:700; }
.bm-item .bn{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bm-item .bc{ flex:0 0 auto; font-size:11.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.bm-sep{ height:1px; background:var(--hair); margin:6px 4px; }
.bm-acts{ display:flex; flex-direction:column; gap:2px; }
.bm-act{
display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; text-align:left;
background:none; border:none; border-radius:4px; padding:9px 11px;
font-family:var(--ui); font-size:12.5px; color:var(--ink-soft); letter-spacing:.02em;
}
.bm-act:hover{ background:rgba(0,0,0,.06); color:var(--ink); }
.bm-act.danger{ color:var(--terra); }
.bm-act.danger:hover{ background:rgba(237,91,35,.09); }
.bm-act .bi{ width:14px; text-align:center; flex:0 0 auto; font-size:12px; }
.bm-form{ display:flex; gap:6px; padding:8px 5px 4px; border-top:1px solid var(--hair); margin-top:6px; }
.bm-form input{
flex:1 1 auto; min-width:0; font-family:var(--ui); font-size:12.5px; color:var(--ink);
padding:9px 10px; border:1px solid var(--hair-strong); border-radius:4px; background:var(--paper);
}
.bm-form input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(237,91,35,.12); }
.bm-ok{
flex:0 0 auto; font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.06em;
color:#fff; background:var(--brass); border:none; border-radius:4px; padding:9px 14px; cursor:pointer;
}
.vsize{ display:flex; border:1px solid var(--hair-strong); border-radius:4px; overflow:hidden; }
.vsize .vs{ font-family:var(--ui); font-size:11px; color:var(--ink-soft); background:var(--card); border:none; border-left:1px solid var(--hair); padding:6px 12px; cursor:pointer; transition:background .15s, color .15s; }
.vsize .vs:first-child{ border-left:none; }
.vsize .vs.on{ background:var(--green); color:#f2f2f2; }
/* DB⑨ タグのみ表示（タグが多い事例でも折り返す） */
.tags{ flex-wrap:wrap; }
/* DB⑩ シャッフルボタン */
.shufbtn{ display:flex; align-items:center; gap:6px; font-family:var(--ui); font-size:12px; letter-spacing:.6px; color:var(--green); background:var(--card); border:1px solid var(--hair-strong); border-radius:4px; padding:8px 12px; cursor:pointer; transition:border-color .16s; }
.shufbtn:hover{ border-color:var(--green); }
/* DB⑤ 無限スクロール補助：上へ戻る */
.gallery{ position:relative; }
.backtop{ position:absolute; right:24px; bottom:18px; z-index:5; font-family:var(--ui); font-size:11px; letter-spacing:.5px; color:#f2f2f2; background:rgba(0,0,0,.88); border:none; border-radius:4px; padding:9px 15px; cursor:pointer; box-shadow:0 6px 16px -8px rgba(0,0,0,.7); }
/* ===========================================================
v3.2 微修正（拓也さんFB 2026-07-12 その2）
=========================================================== */
/* 特大＝2列（1画面に約4枚） */
.grid.size-xl{ grid-template-columns:repeat(2,1fr); }
/* 小＝たくさん表示モード：タグ帯を消して写真だけに・間隔も詰める */
.grid.size-s{ gap:5px; }
.grid.size-s .meta{ display:none; }
/* 保存した事例ボタン（押すとお気に入り一覧表示に切替） */
.savedbtn{ display:flex; align-items:center; gap:4px; font-family:var(--ui); font-size:11.5px; letter-spacing:.3px; color:var(--ink-soft); background:var(--card); border:1px solid var(--hair-strong); border-radius:4px; padding:6px 12px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.savedbtn:hover{ border-color:var(--green); }
.savedbtn.on{ background:var(--green); color:#f2f2f2; border-color:var(--green); }
.savedbtn.on b{ color:var(--brass-2); }
/* ===========================================================
v3.4 サイドバー再設計（B事業タグ体系スプレッドシート準拠・2026-07-12）
=========================================================== */
/* タグが増えてもサイドバー自体が縦スクロールできるように */
#view-databank .filters{ overflow-y:auto; overflow-x:hidden; }
/* ピル型4択（メモ画面の予算欄で使用）：日本語4択のため2×2グリッドに */
.stm{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.stm .pill{ padding:8px 0 7px; }
.stm .pill .k{ font-size:13px; letter-spacing:.5px; }
/* アコーディオン（閉じたグループは見出しだけ・バッジで選択数を表示） */
.facc{ background:var(--card); border:1px solid var(--hair); border-radius:8px; overflow:hidden; flex:0 0 auto; }
.facc .fhead{ width:100%; display:flex; align-items:center; gap:8px; padding:11px 13px; background:transparent; border:none; cursor:pointer; text-align:left; }
.facc .fhead:hover .ft{ color:var(--green); }
.facc .fhead .ft{ font-family:var(--ui); font-size:10.5px; letter-spacing:2.2px; color:var(--ink-soft); text-transform:uppercase; transition:color .15s; }
.facc .fhead .cnt{ font-family:var(--ui); font-size:9.5px; color:#fff; background:var(--brass); border-radius:3px; padding:2px 7px; line-height:1.3; }
.facc .fhead .chev{ margin-left:auto; color:var(--ink-faint); transition:transform .25s; flex:0 0 auto; }
.facc.open .fhead .chev{ transform:rotate(90deg); }
.facc .fbody{ max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; padding:0 13px; }
/* 420px（旧値）だと材料要素36チップ・ソフトタグ14枚が見切れる（2026-08-23 拓也さんFB）。
開閉アニメのために有限値は必要なので、全チップが確実に収まる余裕値にする */
.facc.open .fbody{ max-height:1500px; padding:0 13px 12px; }
/* ビューア下部：タグが多い事例でも折り返して収める */
.viewer .vfoot{ flex-wrap:wrap; padding-left:80px; padding-right:80px; }
/* ============ 認証ゾーン（ログイン・招待受け取り・パスワード再設定） ============ */
.auth-body{
flex:1 1 auto; min-height:0; position:relative; overflow-x:hidden; overflow-y:auto;
display:flex; align-items:center; justify-content:center;
}
.auth-body > .authcard{ margin-block:auto; }
.auth-body .botanic{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.5; }
.authcard{
position:relative; z-index:1; width:440px;
background:var(--card); border:1px solid var(--hair-strong); border-radius:8px;
box-shadow:0 30px 70px -40px rgba(0,0,0,.55);
padding:32px 38px 24px;
}
.authcard .abrand{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:20px; text-align:center; }
.authcard .abrand .name{ font-family:var(--serif-disp); font-size:25px; color:var(--green); letter-spacing:2.5px; }
.authcard .abrand .sub{ font-family:var(--ui); font-size:8.5px; letter-spacing:2.4px; color:var(--ink-faint); text-transform:uppercase; margin-top:4px; }
.authcard .abrand .sub b{ color:var(--brass); font-weight:600; letter-spacing:2px; }
.authcard .atitle{ font-family:var(--ui); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:.02em; text-align:center; margin-bottom:10px; }
.authcard .adesc{ font-family:var(--serif-jp); font-size:12px; color:var(--ink-soft); letter-spacing:.3px; line-height:1.8; text-align:center; margin-bottom:15px; }
.authcard .adesc b{ color:var(--green); font-weight:600; }
.afield{ margin-bottom:11px; }
.afield .albl{ font-family:var(--ui); font-size:9px; letter-spacing:1.6px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:6px; }
.afield input{
width:100%; font-family:var(--serif-jp); font-size:14px; color:var(--ink);
background:var(--paper); border:1px solid var(--hair-strong); border-radius:4px;
padding:11px 13px; outline:none; letter-spacing:.4px;
}
.afield input:focus{ border-color:var(--green-mid); box-shadow:0 0 0 3px rgba(0,0,0,.14); }
.abtn{
width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
font-family:var(--serif-jp); font-size:14px; letter-spacing:1.5px; cursor:pointer;
border-radius:4px; padding:12px; margin-top:7px; transition:filter .15s;
}
.abtn:hover{ filter:brightness(1.06); }
.abtn.primary{ background:linear-gradient(180deg,var(--green-2),var(--green)); color:#f2f2f2; border:none; box-shadow:0 10px 22px -12px rgba(0,0,0,.7); }
.abtn.ghost{ background:var(--card); color:var(--ink); border:1px solid var(--hair-strong); }
.adivider{ display:flex; align-items:center; gap:12px; margin:13px 0 6px; font-family:var(--ui); font-size:9px; letter-spacing:2px; color:var(--ink-faint); text-transform:uppercase; }
.adivider::before, .adivider::after{ content:""; flex:1; height:1px; background:var(--hair); }
.alinks{ display:flex; flex-direction:column; gap:8px; align-items:center; margin-top:15px; }
.alink{ background:none; border:none; cursor:pointer; font-family:var(--serif-jp); font-size:11.5px; color:var(--green-mid); letter-spacing:.4px; text-decoration:underline; text-underline-offset:3px; }
.alink:hover{ color:var(--green); }
.anote{ font-family:var(--ui); font-size:8.5px; letter-spacing:1.2px; color:var(--ink-faint); text-transform:uppercase; text-align:center; margin-top:14px; padding-top:11px; border-top:1px solid var(--hair); }
/* ============ view-login v3.7（Netflix風ポスターウォール + カエデブランドガイドライン準拠） ============
既存の .auth-body / .authcard は view-invite / view-reset で引き続き使用（無変更）。
login のみ #view-login スコープで v3.7 に差替。 */
#view-login, #view-home{
--v37-brand-orange:#ed5b23;
--v37-brand-orange-hover:#d24d1a;
--v37-paper:#ffffff;
--v37-ink:#1a1a1a;
--v37-ink-soft:#555555;
--v37-ink-faint:#999999;
--v37-hair:rgba(0,0,0,.10);
--v37-hair-strong:rgba(0,0,0,.18);
--v37-card-bg:#ffffff;
--v37-overlay-bg:linear-gradient(180deg, rgba(10,10,10,.50), rgba(10,10,10,.34) 45%, rgba(10,10,10,.55));
--v37-ui:'Heebo','Josefin Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Yu Gothic Medium','游ゴシック Medium',YuGothic,'游ゴシック','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',Arial,'メイリオ',Meiryo,sans-serif;
background:var(--v37-paper);
overflow:hidden;
/* position は .view の absolute をそのまま使う（relative で上書きすると
画面が中身の高さに縮み、下部にキャンバス地の帯が出る） */
}
/* モックは .screen が 1600×900px 固定キャンバス。height は px で明示 */
#view-login .v37-bg-collage, #view-home .v37-bg-collage{
position:absolute; top:-25%; left:-30%;
width:160%; height:160%;
display:flex; flex-wrap:wrap; align-content:flex-start; gap:5px;
z-index:0;
transform: rotate(-7deg) scale(1.12);
transform-origin:50% 40%;
filter:saturate(1.05);
pointer-events:none;
}
#view-login .v37-bg-collage img, #view-home .v37-bg-collage img{
height:216px; width:auto;
display:block;
border-radius:2px;
box-shadow:0 6px 18px rgba(0,0,0,.28);
}
/* login / home：背景コラージュを行ごとに右→左→右…と非常にゆっくり流す */
#view-login .v37-bg-collage, #view-home .v37-bg-collage{ flex-wrap:nowrap; flex-direction:column; align-items:flex-start; }
/* 2026-09-06: will-change:transform を外した。
これは「これから変形するので描画面を先に確保しておけ」という指示で、要素が
合成レイヤーへ固定される。行の幅は width:max-content ＝ 中の画像の幅で決まるため、
画像が届いた瞬間に 40px → 5,994px へ跳ねる（Chrome で実測）。固定されたレイヤーが
この跳ねを描き直しそこねるのが「歯抜け」の疑い。端末を回すとメディアクエリが
切り替わってレイヤーが作り直され、そのときは画像が手元にあるので直る、という
報告とも整合する。transform のアニメーションは指定が無くても合成されるので、
この1語を消しても動きは変わらない。あわせて ![]()
に width/height を付けて
跳ねそのものを無くした（constants.COLLAGE_SIZES）。 */
#view-login .v37-mrow, #view-home .v37-mrow{ display:flex; width:max-content; flex:0 0 auto; animation:mrowL 190s linear infinite; }
#view-login .v37-mrow.x, #view-home .v37-mrow.x{ display:none; } /* 追加行は 1279px 以下でのみ表示 */
#view-login .v37-mrow img, #view-home .v37-mrow img{ margin-right:5px; }
#view-login .v37-mrow:nth-child(odd), #view-home .v37-mrow:nth-child(odd){ animation-name:mrowR; animation-duration:220s; }
#view-login .v37-mrow:nth-child(4n+3), #view-home .v37-mrow:nth-child(4n+3){ animation-duration:255s; }
#view-login .v37-mrow:nth-child(4n+2), #view-home .v37-mrow:nth-child(4n+2){ animation-duration:165s; }
@keyframes mrowL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mrowR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion:reduce){ #view-login .v37-mrow, #view-home .v37-mrow{ animation:none; } }
#view-login .v37-overlay, #view-home .v37-overlay{
position:absolute; inset:0;
background:var(--v37-overlay-bg);
z-index:1;
pointer-events:none;
}
#view-home .v37-overlay{ background:rgba(255,255,255,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
/* 中央スポットライト：カルーセル背後だけ明るく抜く */
#view-home .v37-overlay::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 46% 58% at 50% 52%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 70%); }
#view-home .topbar, #view-home .home-body{ position:relative; z-index:2; }
#view-home .topbar{ background:transparent; border-bottom:none; z-index:3; }
#view-login .v37-login-shell{
position:relative; z-index:2;
min-height:100%; max-height:100%; overflow-x:hidden; overflow-y:auto;
display:grid; place-items:center;
padding:40px 20px;
box-sizing:border-box;
}
#view-login .v37-login-card{
width:100%; max-width:440px;
background:var(--v37-card-bg);
border:none;
border-radius:8px;
padding:44px 40px 32px;
box-shadow:0 34px 90px -18px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.12);
font-family:var(--v37-ui);
color:var(--v37-ink);
box-sizing:border-box;
}
#view-login .v37-brand{ text-align:center; margin-bottom:32px; }
#view-login .v37-brand-logo{
width:210px; height:auto;
object-fit:contain;
margin:0 auto 18px;
display:block;
}
#view-login .v37-brand-name{
font-size:15px; font-weight:500; letter-spacing:.22em;
color:var(--v37-ink-faint); font-style:normal;
font-family:var(--v37-ui);
}
#view-login .v37-brackets{ color:var(--v37-ink-faint); opacity:.7; font-weight:400; }
#view-login .v37-login-title{
text-align:center;
font-size:18px; font-weight:500; letter-spacing:.15em;
margin:0 0 24px;
color:var(--v37-ink);
font-family:var(--v37-ui);
}
#view-login .v37-field{ margin-bottom:16px; }
#view-login .v37-field label{
display:block;
font-size:11px; color:var(--v37-ink-soft); letter-spacing:.06em;
margin-bottom:6px;
font-family:var(--v37-ui);
}
#view-login .v37-field input{
width:100%; padding:12px 14px;
background:rgba(255,255,255,.7);
border:1px solid var(--v37-hair-strong);
border-radius:4px;
font-family:var(--v37-ui);
font-size:14px; color:var(--v37-ink);
transition:border-color .15s, background .15s;
box-sizing:border-box;
}
#view-login .v37-field input:focus{
outline:none;
border-color:var(--v37-brand-orange);
background:#fff;
}
#view-login .v37-field input::placeholder{ color:var(--v37-ink-faint); }
#view-login .v37-cta{
width:100%; padding:14px 20px; margin-top:12px;
background:var(--v37-brand-orange); color:#fff;
border:none; border-radius:4px;
font-family:var(--v37-ui);
font-size:15px; font-weight:600; letter-spacing:.08em;
cursor:pointer;
transition:background .15s, transform .1s;
box-sizing:border-box;
}
#view-login .v37-cta:hover{ background:var(--v37-brand-orange-hover); }
#view-login .v37-cta:active{ transform:scale(.995); }
#view-login .v37-divider{
display:flex; align-items:center;
margin:22px 0 16px;
color:var(--v37-ink-faint);
font-size:12px; letter-spacing:.15em;
font-family:var(--v37-ui);
}
#view-login .v37-divider::before, #view-login .v37-divider::after{
content:''; flex:1; height:1px; background:var(--v37-hair-strong);
}
#view-login .v37-divider::before{ margin-right:14px; }
#view-login .v37-divider::after{ margin-left:14px; }
#view-login .v37-cta-secondary{
width:100%; padding:12px 20px;
background:rgba(255,255,255,.7);
color:var(--v37-ink);
border:1px solid var(--v37-hair-strong);
border-radius:4px;
font-family:var(--v37-ui);
font-size:14px; letter-spacing:.05em;
cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:10px;
transition:background .15s;
box-sizing:border-box;
}
#view-login .v37-cta-secondary:hover{ background:#fff; }
#view-login .v37-g-icon{
width:18px; height:18px;
display:inline-flex; align-items:center; justify-content:center;
font-weight:700; font-family:Arial, sans-serif;
color:#4285F4; font-size:16px;
background:#fff; border-radius:2px;
}
#view-login .v37-sub-links{ text-align:center; margin-top:22px; }
#view-login .v37-sub-links button{
background:none; border:none;
display:inline-block; margin:6px 12px;
font-size:12px; color:var(--v37-ink-soft);
cursor:pointer;
text-decoration:underline;
text-decoration-color:var(--v37-hair-strong);
text-underline-offset:3px;
font-family:var(--v37-ui);
padding:0;
}
#view-login .v37-sub-links button:hover{
color:var(--v37-brand-orange);
text-decoration-color:var(--v37-brand-orange);
}
@media (max-width:640px){
#view-login .v37-login-card{ padding:32px 24px; max-width:92vw; }
}
/* ============ 録音取込画面（③の入口） ============ */
.import-body{
flex:1 1 auto; min-height:0; position:relative;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; padding:20px 40px 28px;
}
.import-drop{
width:640px; max-width:92%; cursor:pointer; text-align:center;
background:var(--card); border:2px dashed var(--hair-strong); border-radius:18px;
padding:40px 30px 34px; display:flex; flex-direction:column; align-items:center; gap:12px;
transition:border-color .15s, background .15s;
}
.import-drop:hover{ border-color:var(--green-mid); background:#ffffff; }
.import-drop .ic{ width:62px; height:62px; border-radius:50%; background:var(--paper-2); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; }
.import-drop .t1{ font-family:var(--serif-jp); font-size:17px; color:var(--green); letter-spacing:1px; }
.import-drop .t2{ font-family:var(--serif-jp); font-size:12px; color:var(--ink-soft); letter-spacing:.4px; line-height:1.7; }
.import-drop .pick{
font-family:var(--serif-jp); font-size:13px; letter-spacing:1px; color:#f2f2f2;
background:linear-gradient(180deg,var(--green-2),var(--green)); border-radius:9px;
padding:10px 24px; margin-top:3px; box-shadow:0 10px 22px -12px rgba(0,0,0,.6);
}
.import-drop .pick:hover{ filter:brightness(1.07); }
.import-drop .fmt{ font-family:var(--ui); font-size:9px; letter-spacing:1.6px; color:var(--ink-faint); text-transform:uppercase; margin-top:2px; }
#import-chipwrap{ min-height:36px; display:flex; align-items:center; }
.import-privacy{
display:flex; align-items:center; gap:10px; width:640px; max-width:92%;
background:linear-gradient(180deg,#ffffff,#f8f8f8); border:1px solid var(--hair); border-radius:11px;
padding:11px 14px; font-family:var(--serif-jp); font-size:12px; color:var(--ink-soft);
letter-spacing:.3px; line-height:1.7; text-align:left;
}
.import-privacy b{ color:var(--green); font-weight:600; }
.import-privacy .shield{ flex:0 0 auto; color:var(--green-mid); }
/* ============ プラン依頼メモ：ダウンロード（渡し切り）帯 ============ */
.dl-band{
display:flex; align-items:center; justify-content:space-between; gap:14px;
background:linear-gradient(180deg,#ffffff,#f8f8f8); border:1px solid var(--hair);
border-radius:12px; padding:11px 14px;
}
.dl-band .dtx{ font-family:var(--serif-jp); font-size:11.5px; color:var(--ink-soft); letter-spacing:.3px; line-height:1.65; }
.dl-band .dtx b{ color:var(--terra); font-weight:600; }
.dl-band .dlbtn{
flex:0 0 auto; display:flex; align-items:center; gap:8px; cursor:pointer;
font-family:var(--serif-jp); font-size:13px; letter-spacing:1px; color:#f2f2f2;
background:linear-gradient(180deg,var(--green-2),var(--green)); border:none; border-radius:9px;
padding:10px 18px; box-shadow:0 10px 22px -12px rgba(0,0,0,.6);
}
.dl-band .dlbtn:hover{ filter:brightness(1.07); }
/* ============================================================
v4 RESPONSIVE（2026-09-05）
スマホ 〜767px ／ タブレット 768〜1279px ／ PC 1280px〜
1280px 以上は従来の見た目を維持。以下の @media は 1279px 以下だけに効く
============================================================ */
/* hidden 属性は author の display 宣言に負けるため明示的に打ち消す */
[hidden]{ display:none !important; }
/* Design Bank：アカウントは操作ツール（小中大特大など）と同じ段に並べない */
.gacct{ display:flex; align-items:center; gap:16px; padding-top:8px; margin-bottom:14px; min-height:44px; }
.gacct .acct{ margin-left:auto; }
/* 絞り込みパネルの中にも同じボタンがあるので、PCでは重複を避けて隠す */
.gback{ display:none; flex:0 0 auto; }
.gttl{ min-width:0; display:flex; align-items:baseline; gap:12px; }
.gttl .gk{ font-family:var(--serif-disp); font-size:23px; color:var(--green); letter-spacing:.6px; line-height:1.1; }
.gttl .gsub{ font-family:var(--ui); font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em; white-space:nowrap; }
/* ---------- 全画面共通：アカウントメニュー ---------- */
.acct{ position:relative; flex:0 0 auto; }
/* 案件一覧：上部バーが無い画面なので、ヒーロー右の最上段に置く */
.lhero-r{ display:flex; align-items:center; gap:16px; align-self:flex-end; }
.topbar > .acct{ justify-self:end; }
.acctbtn{
display:flex; align-items:center; gap:10px; cursor:pointer; position:relative;
background:transparent; border:none; padding:5px 9px; border-radius:4px;
font-family:inherit; transition:background .15s;
}
.acctbtn:hover{ background:rgba(0,0,0,.07); }
.acctbtn .av{
width:34px; height:34px; border-radius:50%; flex:0 0 auto;
background:linear-gradient(180deg,var(--green-2),var(--green));
display:flex; align-items:center; justify-content:center;
font-family:var(--serif-disp); font-size:15px; color:#f2f2f2;
box-shadow:0 3px 8px -4px rgba(0,0,0,.7);
}
.acctbtn .tx{ line-height:1.1; text-align:left; }
.acctbtn .tx .nm{ display:block; font-family:var(--serif-jp); font-size:14px; color:var(--green); letter-spacing:.5px; }
.acctbtn .tx .rl{ display:block; font-family:var(--ui); font-size:9px; color:var(--ink-faint); letter-spacing:1.6px; text-transform:uppercase; margin-top:3px; }
.acctbtn .chev{ color:var(--ink-faint); transition:transform .15s; flex:0 0 auto; }
.acct.open .acctbtn .chev{ transform:rotate(180deg); }
.acctbtn .udot{
position:absolute; top:2px; left:30px; min-width:17px; height:17px; border-radius:9px;
background:var(--brass); color:#fff; font-family:var(--ui); font-size:9.5px; font-weight:700;
display:flex; align-items:center; justify-content:center; padding:0 4px;
border:1.5px solid #ffffff; letter-spacing:0;
}
.acctmenu{
position:absolute; top:calc(100% + 10px); right:0; z-index:80;
min-width:252px; background:var(--paper); border:1px solid var(--hair-strong);
border-radius:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.45); padding:6px;
}
.acctmenu .mhead{ padding:10px 12px 9px; border-bottom:1px solid var(--hair); }
.acctmenu .mhead .co{ font-family:var(--ui); font-size:9px; letter-spacing:1.4px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:5px; }
.acctmenu .mhead .nm{ font-family:var(--serif-jp); font-size:15px; color:var(--green); letter-spacing:.5px; }
.acctmenu .mhead .nm .rl{ font-family:var(--ui); font-size:9px; color:var(--ink-faint); letter-spacing:1.4px; text-transform:uppercase; margin-left:7px; }
.acctmenu .mitem{
display:flex; align-items:center; gap:9px; width:100%; margin-top:4px;
background:none; border:none; cursor:pointer; text-align:left;
font-family:var(--serif-jp); font-size:13px; color:var(--ink);
padding:9px 12px; border-radius:4px; letter-spacing:.4px;
}
.acctmenu .mitem:hover{ background:rgba(0,0,0,.07); }
.acctmenu .mitem svg{ color:var(--green-mid); flex:0 0 auto; }
.acctmenu .mitem .nb{
margin-left:auto; min-width:21px; height:21px; border-radius:11px; padding:0 6px;
background:var(--brass); color:#fff; font-family:var(--ui); font-size:10.5px; font-weight:700;
display:flex; align-items:center; justify-content:center;
}
.acctmenu .mnote{ font-family:var(--ui); font-size:8.5px; letter-spacing:1.2px; color:var(--ink-faint); text-transform:uppercase; padding:8px 12px 5px; border-top:1px solid var(--hair); margin-top:4px; }
/* ---------- お知らせパネル ---------- */
.npanel{
position:absolute; top:calc(100% + 10px); right:0; z-index:90;
width:392px; max-width:calc(100vw - 28px);
background:var(--paper); border:1px solid var(--hair-strong); border-radius:8px;
box-shadow:0 24px 56px -20px rgba(0,0,0,.5); overflow:hidden;
display:flex; flex-direction:column;
}
.npanel .nhead{ display:flex; align-items:center; gap:10px; padding:15px 16px 13px; border-bottom:1px solid var(--hair); }
.npanel .nttl{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:9px; }
.npanel .nttl .nb2{ min-width:20px; height:20px; border-radius:10px; padding:0 6px; background:var(--brass); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:0; display:flex; align-items:center; justify-content:center; }
.npanel .nclose{ margin-left:auto; width:30px; height:30px; border:none; background:transparent; border-radius:4px; cursor:pointer; color:var(--ink-faint); font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; }
.npanel .nclose:hover{ background:rgba(0,0,0,.07); color:var(--ink); }
.npanel .ntools{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--hair); background:var(--paper-2); }
.npanel .ntb{
font-family:var(--ui); font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft);
background:transparent; border:1px solid var(--hair); border-radius:999px; padding:7px 13px; cursor:pointer;
transition:border-color .16s, background .16s, color .16s;
}
.npanel .ntb:hover{ border-color:var(--hair-strong); color:var(--ink); }
.npanel .ntb.on{ background:var(--ink); border-color:var(--ink); color:#ffffff; }
.npanel .ntb.plain{ margin-left:auto; border-color:transparent; padding:7px 2px; }
.npanel .ntb.plain:hover{ color:var(--brass); background:transparent; }
.nlist{ overflow-y:auto; max-height:48vh; }
.ngrp{ font-family:var(--ui); font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); padding:14px 16px 7px; }
.nitem{ border-bottom:1px solid rgba(0,0,0,.07); }
.nitem .nrow{
display:grid; grid-template-columns:8px 26px minmax(0,1fr) auto; gap:11px; align-items:start;
width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
padding:13px 16px; font-family:var(--ui); transition:background .16s;
}
.nitem .nrow:hover{ background:var(--paper-2); }
.nitem .ndot{ width:8px; height:8px; border-radius:50%; background:var(--brass); margin-top:5px; }
.nitem.read .ndot{ background:transparent; }
.nitem .nic{ width:26px; height:26px; border-radius:4px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.nitem .nic.edu{ background:rgba(230,178,87,.2); color:#a67c1f; }
.nitem .nic.quota{ background:rgba(237,91,35,.12); color:var(--brass); }
.nitem .nic.ops{ background:rgba(0,0,0,.07); color:var(--ink); }
.nitem .nt{ font-size:13px; line-height:1.5; color:var(--ink-soft); letter-spacing:.01em; }
.nitem:not(.read) .nt{ font-weight:600; color:var(--ink); }
.nitem .nd{ font-size:10.5px; color:var(--ink-faint); letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap; margin-top:2px; }
.nitem .nbody{ display:none; padding:0 16px 15px 61px; font-size:12.5px; line-height:1.85; color:var(--ink-soft); letter-spacing:.02em; }
.nitem.open .nbody{ display:block; }
.nitem .nbody b{ color:var(--ink); font-weight:600; }
.nempty{ padding:40px 16px; text-align:center; font-family:var(--ui); font-size:12.5px; color:var(--ink-faint); letter-spacing:.06em; }
/* ---------- 案件一覧：案件 → 商談 の2階層 ---------- */
.pjblk{ border-bottom:1px solid rgba(0,0,0,.07); }
.pjrow{ display:grid; grid-template-columns:26px minmax(0,1fr) 170px 92px 26px; gap:22px; align-items:center; padding:16px 2px; }
.pjtoggle{
width:26px; height:26px; display:flex; align-items:center; justify-content:center;
background:transparent; border:none; cursor:pointer; color:var(--ink-faint); padding:0;
transition:color .16s, transform .22s;
}
.pjtoggle:hover{ color:var(--brass); }
.pjrow.open .pjtoggle{ transform:rotate(90deg); color:var(--ink); }
.pjmain{ min-width:0; display:flex; align-items:center; gap:12px; }
.pjsub{ display:flex; align-items:center; gap:12px; flex:0 0 auto; font-family:var(--ui); font-size:11.5px; letter-spacing:.05em; color:var(--ink-faint); white-space:nowrap; }
.pjsub .pjm-st, .pjsub .pjm-dt{ display:none; }
.pjsub .pjm-st .dot{ width:7px; height:7px; border-radius:50%; }
.pjst{ min-width:0; }
.pjt{
font-family:var(--ui); font-size:16.5px; font-weight:700; letter-spacing:.01em; color:var(--ink);
line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
border-radius:4px; padding:2px 5px; margin:-2px -5px; cursor:pointer;
}
.pjt:hover{ background:rgba(237,91,35,.08); }
.pjt:focus{ outline:none; background:#fff; box-shadow:0 0 0 2px rgba(237,91,35,.45); cursor:text; }
.pjren{
flex:0 0 auto; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
background:transparent; border:none; cursor:pointer; color:var(--ink-faint); padding:0; border-radius:4px;
transition:color .16s, background .16s;
}
.pjren:hover{ color:var(--brass); background:rgba(237,91,35,.08); }
.pjlast{ font-family:var(--ui); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.pjcnt{ font-variant-numeric:tabular-nums; }
.pjbody{ display:none; padding-bottom:6px; }
.pjblk.open .pjbody{ display:block; }
.pjbody .lrow{ grid-template-columns:minmax(0,1fr) 170px 92px 26px; padding:14px 2px 14px 48px; border-bottom:none; }
.pjbody .lrow .lt{ font-size:14.5px; font-weight:500; }
@media (min-width:768px){
/* 2026-09-05: 幅が足りないときに縮むのは担当者名の側。日付（.lt）は行の見分けに
使うので守る。モック（prototype_v2_pc.html:1449）は .lm を flex:0 0 auto に
していたため、長い担当者名だと日付のほうが省略されていた（iPad縦834pxで実測）。
.lm b に overflow を付けると b の baseline が下端に変わり、baseline 揃えの
.lmain が縦に伸びる（実測 46.8px→58.0px）。.lm だけ baseline 揃えから外して回避する。 */
.pjbody .lrow .lmain{ display:flex; align-items:baseline; gap:18px; }
.pjbody .lrow .lt{ flex:0 0 auto; }
/* white-space:nowrap は必須。min-width:0 で幅0まで縮めるため、これが無いと
担当者名が1文字ずつ折り返して行が縦に伸びる（実測 42.8px→92.0px）。 */
.pjbody .lrow .lm{ margin-top:0; flex:0 1 auto; min-width:0; align-self:center; overflow:hidden; white-space:nowrap; }
/* 省略記号は b 自身に付ける。.lm は display:flex なので text-overflow が中の要素に
適用されず、計算値には入るのに文字がぶつ切りになる（描画して確認）。 */
.pjbody .lrow .lm b{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ---------- 教育：進捗一覧（折りたたみ表） ---------- */
.edu-hero-r{ display:flex; align-items:center; gap:12px; }
.genre{ display:flex; gap:6px; }
.genre .gchip{
font-family:var(--ui); font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
border:1px solid var(--hair); border-radius:999px; padding:7px 15px; cursor:pointer; background:transparent;
}
.genre .gchip.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.prog-card{
display:flex; align-items:center; justify-content:space-between; gap:26px;
background:var(--card); border:1px solid var(--hair); border-radius:8px;
padding:20px 24px; margin-bottom:22px;
}
.prog-card .pc-l{ flex:1 1 auto; min-width:0; }
.prog-card .pc-k{ font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.22em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:9px; }
.prog-card .pc-n{ font-family:var(--ui); font-size:15px; color:var(--ink-soft); letter-spacing:.02em; margin-bottom:12px; }
.prog-card .pc-n b{ font-size:30px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; margin:0 3px; }
.prog-card .pc-pct{ color:var(--brass); font-weight:600; margin-left:6px; }
.prog-card .pc-bar{ height:8px; border-radius:4px; background:var(--paper-3); overflow:hidden; }
.prog-card .pc-fill{ height:100%; border-radius:4px; background:var(--brass); transition:width .3s; }
.prog-card .pc-btn{
flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; cursor:pointer;
background:var(--brass); color:#fff; border:none; border-radius:4px;
font-family:var(--ui); font-size:13.5px; font-weight:600; letter-spacing:.1em;
padding:14px 24px; box-shadow:0 16px 30px -18px rgba(0,0,0,.6);
transition:background .16s, transform .16s;
}
.prog-card .pc-btn:hover{ background:#d24d1a; transform:translateY(-1px); }
.tbl-tools{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tbl-tools .tbtn{ background:none; border:none; cursor:pointer; font-family:var(--ui); font-size:12px; letter-spacing:.06em; color:var(--ink-soft); padding:6px 2px; transition:color .16s; }
.tbl-tools .tbtn:hover{ color:var(--brass); }
.tbl-tools .tsep{ color:var(--hair-strong); font-size:12px; }
.ltbl{ border-top:1px solid var(--hair-strong); }
.ltbl-head{
display:grid; grid-template-columns:minmax(0,1fr) 92px 120px; gap:16px; align-items:center;
padding:12px 14px; font-family:var(--ui); font-size:9px; font-weight:600;
letter-spacing:.24em; color:var(--ink-faint); text-transform:uppercase;
border-bottom:1px solid var(--hair);
}
.chrow{
display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
background:var(--paper-2); border:none; border-bottom:1px solid var(--hair);
padding:14px; font-family:var(--ui); transition:background .16s;
}
.chrow:hover{ background:var(--paper-3); }
.chrow .chv{ flex:0 0 auto; color:var(--ink-faint); transition:transform .22s; }
.chrow.open .chv{ transform:rotate(90deg); color:var(--ink); }
.chrow .cht2{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.01em; line-height:1.45; }
.chrow .chb{ flex:0 0 88px; height:4px; border-radius:2px; background:#ffffff; overflow:hidden; }
.chrow .chb i{ display:block; height:100%; background:var(--brass); }
.chrow .chn2{ flex:0 0 auto; font-size:11.5px; color:var(--ink-faint); letter-spacing:.06em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.chbody{ display:none; }
.chbody.open{ display:block; }
.lsnrow{
display:grid; grid-template-columns:minmax(0,1fr) 92px 120px; gap:16px; align-items:center;
width:100%; text-align:left; cursor:pointer; background:transparent; border:none;
border-bottom:1px solid rgba(0,0,0,.07); padding:13px 14px 13px 36px;
font-family:var(--ui); transition:background .16s;
}
.lsnrow:hover{ background:var(--paper-2); }
.lsnrow.on{ background:rgba(237,91,35,.07); }
.lsnrow .ln{ min-width:0; font-size:13.5px; color:var(--ink); letter-spacing:.01em; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lsnrow:hover .ln{ color:var(--brass); }
.lsnrow .ld2{ font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.lsnrow .lstt{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap; }
.lsnrow .lstt .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.lsnrow .lstt.done{ color:var(--ink); font-weight:600; }
.lsnrow .lstt.done .dot{ background:var(--ink); }
.lsnrow .lstt.half{ color:#a06e28; }
.lsnrow .lstt.half .dot{ background:#d99a2b; box-shadow:0 0 0 4px rgba(217,154,43,.16); }
.lsnrow .lstt.todo{ color:var(--ink-faint); }
.lsnrow .lstt.todo .dot{ background:transparent; border:1.5px solid var(--ink-faint); }
/* 再生画面の右レール（同じ折りたたみ表を圧縮して使う） */
.plist .ltbl{ border-top:none; }
.plist .ltbl-head{ display:none; }
.plist .chrow{ padding:11px 10px; gap:8px; border-radius:4px; }
.plist .chrow .cht2{ font-size:12px; line-height:1.4; }
.plist .chrow .chb{ display:none; }
.plist .chrow .chn2{ font-size:10px; }
.plist .lsnrow{ grid-template-columns:minmax(0,1fr) 44px 16px; gap:8px; padding:11px 8px 11px 24px; }
.plist .lsnrow .ln{ font-size:12px; white-space:normal; line-height:1.4; }
.plist .lsnrow .ld2{ font-size:10px; }
.plist .lsnrow .lstt .lb{ display:none; }
/* ---------- 録音の取込：確認欄 ---------- */
.import-drop{ width:100%; max-width:none; }
.import-privacy{ width:100%; max-width:none; }
#import-confirm{
width:100%; background:var(--card); border:1px solid var(--hair); border-radius:8px;
padding:20px 22px 22px; display:flex; flex-direction:column; gap:18px;
}
.icfield .ick{ font-family:var(--ui); font-size:9.5px; font-weight:600; letter-spacing:1.8px; color:var(--ink-faint); text-transform:uppercase; margin-bottom:9px; }
.icseg{ display:flex; gap:0; background:var(--paper-3); border-radius:4px; padding:3px; margin-bottom:10px; width:max-content; max-width:100%; }
.icseg .icsb{
font-family:var(--ui); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft);
border:none; background:transparent; padding:9px 18px; border-radius:2px; cursor:pointer;
transition:background .18s, color .18s; min-height:44px;
}
.icseg .icsb.on{ background:var(--ink); color:#fff; }
#import-confirm input[type="text"], #import-confirm input[type="date"], #import-confirm select{
width:100%; font-family:var(--ui); font-size:15px; font-weight:600; color:var(--ink);
letter-spacing:.02em; padding:12px 14px; border:1px solid var(--hair-strong);
border-radius:4px; background:var(--paper); min-height:46px;
}
#import-confirm input:focus, #import-confirm select:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(237,91,35,.12); }
#import-confirm input[type="date"]{ max-width:240px; font-weight:500; }
.icnote{ font-family:var(--ui); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; margin-top:8px; line-height:1.6; }
.icquota{
font-family:var(--ui); font-size:12.5px; color:var(--ink-soft); letter-spacing:.04em;
background:var(--paper-2); border-radius:4px; padding:11px 14px;
}
.icquota b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; font-size:15px; }
.icgo{
display:inline-flex; align-items:center; justify-content:center; gap:9px; align-self:flex-start;
background:var(--brass); color:#fff; font-family:var(--ui); font-size:13.5px; font-weight:600;
letter-spacing:.1em; padding:14px 26px; border:none; border-radius:4px; cursor:pointer; min-height:48px;
transition:background .16s;
}
.icgo:hover{ background:#d24d1a; }
/* ---------- メモ編集：条件表の横スクロール ---------- */
/* flex-shrink:0 が無いと、.docbody（縦 flex・overflow-y:auto）の子として最小高さ 0 まで潰れ、
長いメモで表が消える（2026-09-07 本番で発生・flex の仕様＝overflow が visible 以外の子は
自動の最小高さが 0 になる）。モック prototype_v2_pc.html にも同じ欠陥があった＝2026-09-10 の逆同期で反映済み
（モックの