@charset "UTF-8";
/* =============================================================================
   StyleDoc — 流用機構（TechnoStyle の illustList と fs をそのまま採用）
   - イラストグリッド: .illustList + .colmun2..15 + .illust/.illustArea/.nameArea + 罫線セル
   - フォルダツリー  : .fs（grid 28px 1fr 40cqi ＋ container query）
   色や余白は core.css のトークン（--line / --illustList-* / --base-margin 等）を参照する
   ので、カラー/デザインテーマに追従する。機構（構造・グリッド計算）は無改変。
   ============================================================================= */

/* ---- フォルダツリー fs --------------------------------------------------- */
.fs{ width:100%; list-style:none; margin:0 0 var(--block-gap); padding:0; container-type:inline-size; }
/* ★グリッドで「アイコン列＋名前列＋説明列」を作ってはいけない。**フォルダ名は素のテキスト**で、
   グリッドは**文字のかたまりと要素のひとつひとつが別のマス**になるため、名前に装飾を付けて
   `FaxDir<strong>テキスト</strong>` の形になると `<strong>` が**説明の列（3列目）へ飛ぶ**
   （ユーザー報告。Q&Aパネルと同じ機構）。
   アイコンと説明は position:absolute で置き、**名前はふつうの流し込み**にしておけば、
   中に何個要素が入っても崩れない。寸法は従来と同じ（左28px／説明 40cqi／子ツリーは全幅）。 */
/* ★説明は **float** で置く。`position:absolute` にすると**行の高さに数えられない**ので、
   説明が2行以上になった行で**次の行へ食い込んで文字が重なる**（ユーザー報告。実測で
   説明80px に対し行が21px のまま＝60px はみ出していた）。
   float なら中身として高さに含まれ、名前は横に回り込む。`display:flow-root` は
   「float を自分の中に収める」ための指定（これが無いと float が親からはみ出す）。 */
/* ★名前の折り返しは **文字単位**（`word-break:break-all`）。フォルダ名・ファイル名は
   `StyleDocx_Setup_0.3.11.20260913_135449.exe` やパスのように**長い英数字**になりやすい。
   既定（`word-break:normal`）でも .page の `overflow-wrap:anywhere` が継承されるので器から
   はみ出しはしないが、あれは「**その語が1行に入りきらないときだけ**切る」規則なので、
   **行末を大きく余らせてから折り返す**（実測＝560px の器で長いパスが3行・360px の器で
   ツリー全体が 245px）。文字単位にすると各行を詰めて折り返す（同 2行・225px）。
   説明（`.desc`）は以前から文字単位なので、これで名前と説明の折り返しがそろう。
   ★`break-all` では和文の禁則処理が外れる（行頭に句読点が来うる）。説明列が以前から
   そうなっている＝ツリーの中で見え方が食い違わないほうを採った。 */
.fs li[data-icon]{
  position:relative; display:flow-root; padding:0 0 0 28px;
  border-top:1px solid var(--fs-borderColor); line-height:20px; letter-spacing:0.07em; margin:0;
  word-break:break-all;
}
.fs li[data-icon] > .desc{ float:right; width:40cqi; box-sizing:border-box;
  padding-left:10px; word-break:break-all; overflow-wrap:anywhere; }
/* 子ツリーは説明の下へ回し（clear）、行いっぱいに広げ直す（親の左パディングを打ち消してから 28px 下げる）。 */
.fs li[data-icon] > ul{ clear:both; list-style:none; margin:0 0 0 -28px; padding:0 0 0 28px; }
.fs li[data-icon]::before{ content:attr(data-icon); position:absolute; left:0; top:0; width:28px; text-align:center;
  font-style:normal; font-size:16px; line-height:20px; letter-spacing:0; }

/* ---- 罫線セル・回転反転・重ね（イラスト連結線用） ------------------------ */
.rule,.rule50,.ruleW50,.ruleH50,.ruleWH50,.ruleManyCommentsW,.ruleManyCommentsWH{
  display:inline-block; vertical-align:top; margin:0px; position:relative; }
.rule{ width:100px; height:100px; }
.rule50,.ruleWH50{ width:50px; height:50px; }
.ruleW50{ width:50px; height:100px; }
.ruleH50{ width:100px; height:50px; }
.ruleManyCommentsW{ width:120px; height:60px; }
.ruleManyCommentsWH{ width:120px; height:180px; }
.rotate90{ transform:rotate(90deg); }
.rotate180{ transform:rotate(180deg); }
.rotate270{ transform:rotate(270deg); }
.reverseX{ transform:scaleX(-1); }
.reverseY{ transform:scaleY(-1); }
.reverseXY{ transform:scale(-1,-1); }
.overlayillust{ position:relative; }
/* 重ね2層目以降は絶対配置。top/left を明示しないと「静的位置」に載るが、静的位置は親の
   display(flex/block)や Chromium バージョンで変わり（アプリ内ブラウザは原点でも WebView2 は
   中央基準になり右下へずれる等）不安定。原点(0,0)へ明示ピンして重なりを確定させる。基準層は
   inline style の position:relative が勝ち＝この top/left:0 は相対0＝無効果。層オフセット（overlayTop
   は margin、overlayBase は inline left/top）はこの上に効くので保持される。 */
.overlayillust > svg{ position:absolute; top:0; left:0; }

/* ---- イラストグリッド illustList ----------------------------------------- */
.illustList{
  background-color:var(--illustList-bgColor); color:var(--illustList-fontColor);
  border-radius:6px; padding:10px; display:flex; flex-direction:row;
  justify-content:flex-start; flex-wrap:wrap; margin-bottom:var(--base-margin);
}
.illustList > div{ display:flex; flex-direction:row; justify-content:flex-start; width:100%; z-index:2; }
.illustList > div > .illust{
  width:100%; max-width:100px; min-height:100px; padding:0px; display:flex;
  flex-direction:column; align-items:stretch; margin:2px;
}
.illustList > div > .illust > .illustArea{
  max-height:70px; width:100%; position:relative; display:flex; align-items:stretch; flex-direction:column; padding:3px;
}
.illustList > div > .illust > .nameArea{ text-align:center; font-size:10px; line-height:10px; width:100%; word-break:break-all; }
.illustList > div > .illust > .textUp{ margin-top:-5%; }
.illustList > div > .illust > .textUpM{ margin-top:-20%; }
.illustList > div > .illust > .textUpL{ margin-top:-30%; }

/* 吹き出し・枠の背景／ボーダー／矢印 */
.illustList > div > .illust.illustBubbleBg{ background-color:var(--illustBubble-bgColor); }
.illustList > div .illust.illustBubbleBorderLeft:After{ box-sizing:content-box; content:""; position:absolute; right:0; bottom:0; left:-5px; margin:auto; width:100%; height:100%; border-left:solid 5px var(--illustBubble-bgColor); }
.illustList > div .illust.illustBubbleBorderRight:After{ box-sizing:content-box; content:""; position:absolute; right:-5px; bottom:0; margin:auto; width:100%; height:100%; border-right:solid 5px var(--illustBubble-bgColor); }
.illustList > div .illust.illustBubbleBorderLeftH105:After{ box-sizing:content-box; content:""; position:absolute; right:0; bottom:0; left:-5px; margin:auto; width:100%; height:calc(100% + 5px); border-left:solid 5px var(--illustBubble-bgColor); }
.illustList > div .illust.illustBubbleBorderRightH105:After{ box-sizing:content-box; content:""; position:absolute; right:-5px; bottom:0; margin:auto; width:100%; height:calc(100% + 5px); border-right:solid 5px var(--illustBubble-bgColor); }
.illustList > div .illust.illustBubbleBorderBottom:before{ box-sizing:content-box; content:""; position:absolute; right:0; bottom:-5px; left:0; margin:auto; width:100%; height:100%; border-bottom:solid 5px var(--illustBubble-bgColor); }
.illustList > div .illust.leftArrowInBubble{ position:relative; }
.illustList > div .illust.leftArrowInBubble:after{ content:""; position:absolute; right:0; bottom:70%; left:-110%; margin:auto; width:0; height:0; border-style:solid; border-width:10px 17.3px 10px 0; border-color:transparent var(--illustBubble-bgColor) transparent transparent; }
.illustList > div .illust.rightArrowInBubble{ position:relative; }
.illustList > div .illust.rightArrowInBubble:after{ content:""; position:absolute; right:0; bottom:70%; left:96%; margin:auto; width:0; height:0; border-style:solid; border-width:10px 0 10px 17.3px; border-color:transparent transparent transparent var(--illustBubble-bgColor); }
.illustList > div .illust.illustBubbleBorderLeft,
.illustList > div .illust.illustBubbleBorderRight,
.illustList > div .illust.illustBubbleBorderLeftH105,
.illustList > div .illust.illustBubbleBorderRightH105,
.illustList > div .illust.illustBubbleBorderBottom{ position:relative; }

/* イラスト高さ（個別 .illust 付与） */
.illustList > div > .illust.illustH120{ --illust-h:120px; --area-h:90px; --name-fs:12px; }
.illustList > div > .illust.illustH160{ --illust-h:160px; --area-h:130px; --name-fs:16px; }
.illustList > div > .illust.illustH200{ --illust-h:200px; --area-h:170px; --name-fs:20px; }
.illustList > div > .illust:is(.illustH120,.illustH160,.illustH200){ height:var(--illust-h); max-width:var(--illust-h); }
.illustList > div > .illust:is(.illustH120,.illustH160,.illustH200) > .illustArea{ max-height:var(--area-h); height:var(--area-h); }
.illustList > div > .illust:is(.illustH120,.illustH160,.illustH200) > .nameArea{ font-size:var(--name-fs); line-height:var(--name-fs); }

/* 横2ブロック / 罫線セルの列幅 */
.illustList > div > .illust.illustMC2block{ width:calc((100% / 5) * 2); max-width:220px; }
.illustList > div > .illust.illustMC2block .illustArea{ width:100%; position:relative; }
.illustList > div .rule{ width:calc(100% / 5); height:100px; display:flex; flex-direction:column; margin:0px; position:relative; align-items:stretch; }
.illustList > div .rule50{ width:calc(100% / 10); height:50px; display:flex; flex-direction:column; margin:0px; position:relative; align-items:stretch; }
.illustList > div .ruleW50{ width:calc(100% / 10); height:100px; display:flex; flex-direction:column; margin:0px; position:relative; align-items:stretch; }
.illustList > div .ruleH50{ width:calc(100% / 5); height:50px; display:flex; flex-direction:column; margin:0px; position:relative; align-items:stretch; }
.illustList.margin0 div .illust{ margin:0; }

/* レイヤー（吹き出し下層） */
.illustList.layer-1{ position:absolute; z-index:1; left:0px; top:0px; background-color:transparent; }

/* イラスト高さ（リスト全体付与） */
.illustList.illustH120{ --illust-h:120px; --area-h:90px; --name-fs:12px; }
.illustList.illustH160{ --illust-h:160px; --area-h:130px; --name-fs:16px; }
.illustList.illustH200{ --illust-h:200px; --area-h:170px; --name-fs:20px; }
.illustList:is(.illustH120,.illustH160,.illustH200) > div > .illust{ height:var(--illust-h); max-width:var(--illust-h); }
.illustList:is(.illustH120,.illustH160,.illustH200) > div > .illust > .illustArea{ max-height:var(--area-h); height:var(--area-h); }
.illustList:is(.illustH120,.illustH160,.illustH200) > div > .illust > .illustArea.overlayillust{ width:100%; }
.illustList:is(.illustH120,.illustH160,.illustH200) > div > .illust > .nameArea{ font-size:var(--name-fs); line-height:var(--name-fs); }

/* 列数指定（--col-count で 2〜15 列） */
.illustList.colmun2{ --col-count:2; }
.illustList.colmun3{ --col-count:3; }
.illustList.colmun4{ --col-count:4; }
.illustList.colmun5{ --col-count:5; }
.illustList.colmun6{ --col-count:6; }
.illustList.colmun7{ --col-count:7; }
.illustList.colmun8{ --col-count:8; }
.illustList.colmun9{ --col-count:9; }
.illustList.colmun10{ --col-count:10; }
.illustList.colmun11{ --col-count:11; }
.illustList.colmun12{ --col-count:12; }
.illustList.colmun13{ --col-count:13; }
.illustList.colmun14{ --col-count:14; }
.illustList.colmun15{ --col-count:15; }
.illustList:is(.colmun2,.colmun3,.colmun4,.colmun5,.colmun6,.colmun7,.colmun8,.colmun9,.colmun10,.colmun11,.colmun12,.colmun13,.colmun14,.colmun15) div .illust{ width:calc(100% / var(--col-count)); max-width:calc(100% / var(--col-count)); }
.illustList:is(.colmun2,.colmun3,.colmun4,.colmun5,.colmun6,.colmun7,.colmun8,.colmun9,.colmun10,.colmun11,.colmun12,.colmun13,.colmun14,.colmun15) div > .illust.illustMC2block{ width:calc((100% / var(--col-count)) * 2); max-width:220px; }
.illustList:is(.colmun2,.colmun3,.colmun4,.colmun5,.colmun6,.colmun7,.colmun8,.colmun9,.colmun10,.colmun11,.colmun12,.colmun13,.colmun14,.colmun15) div > .rule{ width:calc(100% / var(--col-count)); }
.illustList:is(.colmun2,.colmun3,.colmun4,.colmun5,.colmun6,.colmun7,.colmun8,.colmun9,.colmun10,.colmun11,.colmun12,.colmun13,.colmun14,.colmun15) div > .ruleH50{ width:calc(100% / var(--col-count)); }
.illustList:is(.colmun2,.colmun3,.colmun4,.colmun5,.colmun6,.colmun7,.colmun8,.colmun9,.colmun10,.colmun11,.colmun12,.colmun13,.colmun14,.colmun15) div > .rule50{ width:calc(100% / (var(--col-count) * 2)); }
.illustList:is(.colmun2,.colmun3,.colmun4,.colmun5,.colmun6,.colmun7,.colmun8,.colmun9,.colmun10,.colmun11,.colmun12,.colmun13,.colmun14,.colmun15) div > .ruleW50{ width:calc(100% / (var(--col-count) * 2)); }

/* 表示用 svg の既定（illustArea / fs 内） */
.illustArea > svg{ width:100%; height:100%; }