/* ===== 感想フォーム・アンケート・みんなの感想・返信を見る（トップの #feedback の中）。DESIGN.md §15 =====
   ・すべて .fbx-in の中だけに効く（サイトの他の部分とぶつからない）。サイトの :root と同じ名前の変数は、ここでも .fbx-in に持つ
   ・文字の倍率 --k や、スマホ用の切り替えは、「ウィンドウの幅」ではなく「フォームの枠(.fbx)の幅」で決める（@container fbx。昔の iframe の幅と同じ動き）
   ・文字の大きさ・間隔・色は、サイトの :root と同じ値（変えるときは、style.css の :root と両方） */
#feedback { position: relative; }   /* 魔人の手の層（feedback.js）の基準 */
.fbx { container: fbx / inline-size; width: 100%; max-width: var(--w-form); margin: var(--sp-6) auto 0; }

  .fbx-in{
    --k:.96;   /* 文字の倍率。フォームの幅に応じて、このファイルの下の方で段階的に大きくする */

    /* ===== サイトの style.css の :root と同じ名前・同じ値（変えるときは、サイトと両方） ===== */
    --text:#2b2b2b; --muted:#777; --white:#fff; --alert:#e5383b;
    --card-line:#dcd8e2; --line-ui:#c9c9c9; --gray-100:#f1f1f1; --tint-soft:#faf9fc;
    --font-main:"Kaisei Tokumin","Hiragino Mincho ProN","Yu Mincho",serif;
    --font-accent:"Murecho","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    --fs-xs:calc(13px*var(--k)); --fs-small:calc(15px*var(--k)); --fs-body:calc(16px*var(--k)); --fs-lg:calc(18px*var(--k)); --fs-title:calc(40px*var(--k));
    --fw-g:500; --fw-g-body:400; --fw-g-light:300;     /* ゴシックの太さ */
    --ls-s:.05em; --ls-l:.18em;
    --r-xs:.3em; --r-sq:4%; --r-sm:var(--r-xs); --r-md:var(--r-xs); --r-full:999px;   /* 枠の角は、すべて同じ（サイトの :root と同じ）*/
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
    --gutter:20px; --w-xs:360px;

    /* ===== フォームだけの色（状態の色。ほかに色を足さない） ===== */
    --ok:#2e7d4f; --ok-bg:#eaf6ee;                                      /* 成功 */
    --alert-bg:#fff5f4;                                                 /* 警告（線と文字は --alert） */
    --info-line:#8bb8ec; --info-bg:#eaf3ff;                             /* お知らせ */
    --caution-line:#d9b46a; --caution-bg:#fbf5e8; --caution-fill:#f3d98a; --caution-strong:#c9972e; --caution-ink:#4a3a10;   /* 注意（黄） */
    --adm:#5f7fa3; --adm-bg:#eaf0f7;                                    /* 管理人の返信 */
    --rule:#b9534d;                                                     /* ルールの注意書き */
  }

  /* 文字の大きさは、フォームの幅（iframeの幅）に合わせて、段階的に大きくなる（スマホ → PC） */
  @container fbx (min-width:480px){.fbx-in{--k:1}}

  @container fbx (min-width:560px){.fbx-in{--k:1.06}}

  @container fbx (min-width:640px){.fbx-in{--k:1.11}}

  /* 文字の大きさは、フォームの幅（iframeの幅）に合わせて、段階的に大きくなる（スマホ → PC） */
  .fbx-in *{box-sizing:border-box}

  .fbx-in{margin:0;background:var(--white);color:var(--text);
       font-family:var(--font-main);line-height:1.9;letter-spacing:0}

  /* ゴシック（Murecho）にするもの：見出し・項目名・タブ。ほかは明朝（Kaisei Tokumin）。ボタンは下の「ボタン」にまとめた */
  .fbx-in .ttl,.fbx-in label,.fbx-in .tab,.fbx-in .setl,.fbx-in .codebar .cl,.fbx-in .more{font-family:var(--font-accent);font-weight:var(--fw-g)}

  .fbx-in{max-width:560px;margin:0 auto;padding:var(--sp-7) var(--sp-5) var(--sp-8)}

  .fbx-in .ttl{font-size:var(--fs-title);letter-spacing:var(--ls-l);text-align:center;margin:0 0 var(--sp-6);line-height:1.2;padding-left:.18em}


  /* ===== タブ：ボタンを並べる（枠線なし）。選んだボタンへ、黒い面が傾いて着地し、ぷよんと潰れて落ち着く（動画の「A/B」と同じ型）。DESIGN.md §20 ===== */
  .fbx-in .tabs{position:relative;display:flex;flex-wrap:wrap;width:fit-content;max-width:100%;margin:0 auto var(--sp-7);padding:var(--sp-1);font-size:var(--fs-small)}

  .fbx-in .tab{position:relative;z-index:1;flex:1 1 auto;background:none;border:0;border-radius:var(--r-xs);padding:var(--sp-3) var(--sp-4);font-size:inherit;font-weight:var(--fw-g-body);line-height:1.4;white-space:nowrap;color:var(--muted);cursor:pointer;transition:color .2s .08s}

  .fbx-in .tab.on{color:var(--white)}

  .fbx-in .tab:not(.on):hover{color:var(--text)}

  .fbx-in .tab:focus-visible{outline:2px solid var(--text);outline-offset:2px}
   /* サイトに埋め込まれているときは、高さをサイトが合わせるので、合わせる前の一瞬にスクロールバーが出ないように隠す */
  .fbx-in .tab-ink{position:absolute;left:0;top:0;z-index:0;width:var(--w,0);height:var(--h,0);border-radius:var(--r-xs);background:var(--text);transform:translate(var(--x,0),var(--y,0));pointer-events:none;opacity:0}

  .fbx-in .tabs.ready .tab-ink{opacity:1;transition:transform .42s cubic-bezier(.3,1.35,.5,1),width .42s cubic-bezier(.3,1.35,.5,1),height .42s cubic-bezier(.3,1.35,.5,1)}

  .fbx-in .tab-ink.puyon{animation:fbx-puyon .5s cubic-bezier(.3,.6,.4,1)}

  @keyframes fbx-puyon{
    0%{rotate:calc(var(--tilt,1)*-7deg);scale:1.12 .86}
    32%{rotate:calc(var(--tilt,1)*4deg);scale:.92 1.1}
    62%{rotate:calc(var(--tilt,1)*-1.5deg);scale:1.04 .97}
    100%{rotate:0deg;scale:1 1}}

  @container fbx (max-width:520px){.fbx-in .tab{padding:var(--sp-3) var(--sp-2);font-size:var(--fs-xs)}}

  @media (prefers-reduced-motion:reduce){.fbx-in .tabs.ready .tab-ink{transition:none}
.fbx-in .tab-ink.puyon{animation:none}}


  .fbx-in .field{margin-bottom:var(--sp-6)}

  .fbx-in label{display:block;font-size:var(--fs-body);margin:0 0 var(--sp-3)}

  .fbx-in .req{color:var(--alert);margin-left:var(--sp-2);font-weight:400}

  .fbx-in .post-thumb{display:block;width:72px;height:72px;object-fit:cover;border:1px solid var(--card-line);border-radius:var(--r-sq);margin:var(--sp-2) 0}

  .fbx-in .work-thumb{display:block;width:96px;height:96px;object-fit:cover;border:1px solid var(--card-line);border-radius:var(--r-sq);margin-top:var(--sp-3)}

  .fbx-in input[type=text],.fbx-in textarea{width:100%;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line-ui);border-radius:var(--r-sm);
       background:var(--white);color:var(--text);font:inherit;font-size:max(16px,var(--fs-body));letter-spacing:0}

  .fbx-in input[type=text]:focus,.fbx-in textarea:focus{outline:none;border-color:var(--muted)}

  .fbx-in ::placeholder{color:var(--line-ui)}

  .fbx-in textarea{min-height:170px;resize:vertical}

  .fbx-in .count{text-align:right;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}

  .fbx-in .odds{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--muted)}

  .fbx-in .opt{display:inline-flex;align-items:center;gap:var(--sp-2);margin:var(--sp-1) var(--sp-5) var(--sp-1) 0;font-family:var(--font-main);font-weight:var(--fw-g-body);font-size:var(--fs-body);cursor:pointer}

  .fbx-in .opt.slap-char{font-family:var(--font-accent);font-weight:var(--fw-g-body)}
   /* キャラ名の選択肢は、キャラ選択として、ゴシック */
  .fbx-in .opt input{margin:0;width:18px;height:18px;accent-color:var(--text)}


  .fbx-in .setgrp{margin-top:var(--sp-6);margin-bottom:var(--sp-6);border-bottom:1px solid var(--card-line)}

  .fbx-in .setrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2) var(--sp-4);padding:var(--sp-4) 0;border-top:1px solid var(--card-line)}

  .fbx-in .setrow.off{opacity:.4}

  .fbx-in .setl{font-size:var(--fs-small)}

  .fbx-in .seg{display:inline-flex;border:1px solid var(--card-line);border-radius:var(--r-xs);overflow:hidden}

  .fbx-in .seg label{position:relative;display:block;margin:0;font-weight:var(--fw-g-light);font-size:var(--fs-small);cursor:pointer}

  .fbx-in .seg input{position:absolute;opacity:0;width:0;height:0}

  .fbx-in .seg span{display:block;padding:var(--sp-2) var(--sp-4);white-space:nowrap}

  .fbx-in .seg input:checked+span{background:var(--text);color:var(--white)}

  .fbx-in .seg input:focus-visible+span{outline:2px solid var(--text);outline-offset:-2px}

  .fbx-in .seg input:disabled+span{cursor:default}

  /* 感想フォームの選択肢：枠で囲まず「公開する｜公開しない」と並べる。選ぶと、手がバンッと張り付いて、選んだ文字が手のひらに書かれる（動きは下の「手でたたく」の script） */
  .fbx-in .seg-slap{border:0;border-radius:0;overflow:visible;position:relative}

  .fbx-in .seg-slap label+label{border-left:1px solid var(--line-ui)}

  .fbx-in .seg-slap input:checked+span{background:none;color:inherit}

  .fbx-in .seg-slap span{padding:var(--sp-2) var(--sp-5);color:var(--muted);transition:color .16s}

  .fbx-in .seg-slap label.on span{color:var(--text)}

  .fbx-in .seg-slap input:focus-visible+span{outline-offset:-2px;border-radius:var(--r-sm)}

  .fbx-in .setgrp .setrow{min-height:116px}

  .fbx-in .ownset .setrow{min-height:0}
   /* 「返信を見る」の、みんなのコメント：手のまわりを、投稿フォームより広く */
  .fbx-in .setgrp .seg,.fbx-in .ownset .seg{margin-left:auto}
   /* 見出しが長くて折り返しても、選択肢は右に寄せる（手が見出しに重ならないように） */
  @container fbx (max-width:520px){.fbx-in .setgrp .setrow,.fbx-in .ownset .setrow{flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:max(var(--sp-4),calc(14.5cqw - 26px));min-height:0;padding:var(--sp-4) 0 max(var(--sp-5),calc(25cqw - 48px))}
.fbx-in .setgrp .seg,.fbx-in .ownset .seg{margin-left:auto}}
   /* スマホでは、見出しを上（左）に、選択肢を下（右寄せ）に。中央そろえにしない（手が見出しに重ならないよう、間を空ける） */
  .fbx-in a,.fbx-in img{-webkit-user-drag:none}

  .fbx-in .slap-hand{z-index:300;pointer-events:none;user-select:none;-webkit-user-select:none}

  .fbx-in .slap-hand img{max-width:none}

  .fbx-in .slap-text{font-family:inherit}

  /* アイコン選択・アンケート：選んだものに、手が残る（手の形のところは、後ろの色を反転）。手が上下にはみ出すぶん、余白を広めに */
  .fbx-in .picks.hand-ui{margin:var(--sp-4) 0 var(--sp-5)}

  /* アイコンの大きさ：PC（幅761px〜）は6列で固定。タブレット（〜760px）は、同じ6列のまま、幅いっぱいまで（最大600px）広げて大きく。スマホ（〜480px）は、4列にして、1つを大きく。小さなスマホ（〜360px）は3列（選びやすいように） */
  @container fbx (max-width:760px){.fbx-in #iconPick.picks{max-width:600px;gap:var(--sp-3)}}

  @container fbx (max-width:480px){.fbx-in #iconPick.picks{grid-template-columns:repeat(4,1fr);max-width:none;gap:var(--sp-3)}}

  @container fbx (max-width:360px){.fbx-in #iconPick.picks{grid-template-columns:repeat(3,1fr)}}

  .fbx-in .picks.hand-ui .pick.on{border-color:transparent}

  .fbx-in .slap-opt{position:relative;margin:var(--sp-7) var(--sp-5) var(--sp-7) 0;padding:var(--sp-1) var(--sp-2);color:var(--muted);transition:color .16s}

  .fbx-in .slap-opt.on{color:var(--text)}

  .fbx-in .slap-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

  .fbx-in .slap-opt:has(input:focus-visible),.fbx-in .slap-tile:has(input:focus-visible){outline:2px solid var(--text);outline-offset:2px;border-radius:var(--r-sm)}

  .fbx-in .slap-tile .trow input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}


  .fbx-in .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--sp-3)}

  .fbx-in .tile{display:block;margin:0;padding:var(--sp-2);border:1px solid var(--card-line);border-radius:var(--r-sm);font-weight:var(--fw-g-body);cursor:pointer;text-align:center;
        -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

  .fbx-in .tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;border-radius:var(--r-sq);margin-bottom:var(--sp-2);
        pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

  .fbx-in .tile .ph{width:100%;aspect-ratio:1/1;border-radius:var(--r-sq);margin-bottom:var(--sp-2);background:var(--gray-100)}

  .fbx-in .tile .trow{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:var(--fs-small)}

  .fbx-in .tile .trow input{margin:0;width:18px;height:18px;accent-color:var(--text)}

  .fbx-in .tile:has(input:checked){border-color:var(--text);background:var(--tint-soft)}


  .fbx-in .rules{margin:0 0 var(--sp-3);padding-left:1.4em;list-style:disc;color:var(--text);font-size:var(--fs-small);font-weight:400}

  .fbx-in .rules li{margin:var(--sp-1) 0}

  .fbx-in .agree-note{margin:0 0 var(--sp-4);font-size:var(--fs-xs);font-weight:400;color:var(--muted)}


  /* ===== ボタン（サイトの .btn と同じ：ほぼ四角（--r-xs）・Murecho・太さ400）。大きさは3段：main＝大、通常＝mini / cmsend / pg、細かい部品。
     色は2種類：白地＋枠（mini / pg）と、濃い塗り（main / cmsend / pg.on / codebar の mini）。状態は .warn（赤）・.caution（黄）・:disabled ===== */
  .fbx-in button.main,.fbx-in button.mini,.fbx-in button.cmsend,.fbx-in .pg{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 var(--sp-4);
       border:1px solid var(--line-ui);border-radius:var(--r-xs);background:var(--white);color:var(--text);
       font-family:var(--font-accent);font-size:var(--fs-xs);font-weight:var(--fw-g-body);letter-spacing:var(--ls-s);line-height:1.2;white-space:nowrap;transition:opacity .2s}

  .fbx-in button.main:hover,.fbx-in button.mini:hover,.fbx-in button.cmsend:hover,.fbx-in .pg:hover{opacity:.85}

  .fbx-in button.main:disabled,.fbx-in button.mini:disabled,.fbx-in button.cmsend:disabled,.fbx-in .pg:disabled{opacity:.45;cursor:default}

  .fbx-in button.main{display:flex;width:72%;max-width:var(--w-xs);min-height:56px;margin:var(--sp-5) auto 0;font-size:var(--fs-small)}

  .fbx-in button.main,.fbx-in button.cmsend,.fbx-in .pg.on,.fbx-in .codebar button.mini{background:var(--text);border-color:var(--text);color:var(--white)}

  .fbx-in button.cmsend{flex:none;padding:0 var(--sp-5);font-size:var(--fs-small)}

  .fbx-in .pg{min-width:38px;padding:0 var(--sp-3);font-size:var(--fs-small)}

  .fbx-in button.mini.warn{border-color:var(--alert);color:var(--alert)}

  .fbx-in .codebar button.mini{flex:none}

  .fbx-in .ownacts button.mini{flex:1;max-width:180px;min-height:46px;font-size:var(--fs-small);border-width:1.5px;border-color:var(--text)}

  .fbx-in .ownacts button.mini.warn{border-color:var(--alert);background:var(--alert-bg)}

  .fbx-in .ownconf button.mini.caution{border-color:var(--caution-strong);background:var(--caution-fill);color:var(--caution-ink)}


  .fbx-in .muted{color:var(--muted);font-size:var(--fs-xs)}

  .fbx-in .err{color:var(--alert);font-size:var(--fs-small);margin-top:var(--sp-4);text-align:center}

  .fbx-in .flash{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);text-align:center;font-size:var(--fs-small);font-weight:700;margin:var(--sp-6) 0 0;line-height:1.6}

  .fbx-in .flash.ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok)}

  .fbx-in .flash.err{background:var(--alert-bg);border:1px solid var(--alert);color:var(--alert)}

  .fbx-in .flash.muted{background:var(--tint-soft);border:1px solid var(--card-line);color:var(--muted);font-weight:400;font-size:var(--fs-small)}

  .fbx-in .flash:empty{display:none}

  .fbx-in #svNote.flash{margin:0 0 var(--sp-6)}

  .fbx-in .thanks{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-3)}

  .fbx-in .bubble{font-family:var(--font-accent);background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-small);line-height:1.7}

  .fbx-in .bubble b{display:block;font-size:var(--fs-xs);color:var(--text);font-weight:700}

  .fbx-in .bubble small{display:block;margin-top:var(--sp-1);font-size:.8em;color:var(--muted);opacity:.65}
   /* 「あなたにだけ見えています」：小さく・薄く */
  /* 自分の投稿(返信を見る)：カードの左のアイコンを少し大きくして、そこから吹き出しでセリフを言う(アイコンは1つだけ) */
  .fbx-in .says .thanks{margin-bottom:var(--sp-3)}

  .fbx-in .says .thanks .bubble{position:relative;flex:1;min-width:0}

  .fbx-in .says .thanks .bubble::before{content:"";position:absolute;left:-7px;top:var(--sp-5);width:12px;height:12px;background:var(--white);border-left:1px solid var(--card-line);border-bottom:1px solid var(--card-line);transform:rotate(45deg)}

  .fbx-in .thanks.big{gap:var(--sp-4);margin:var(--sp-5) 0 0;padding:var(--sp-4);border-radius:var(--r-md);background:var(--tint-soft);border:1px solid var(--card-line)}

  .fbx-in .thanks.big .av{width:72px;height:72px}

  .fbx-in .thanks.big .bubble{position:relative;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-body);border-radius:var(--r-md)}

  .fbx-in .thanks.big .bubble b{font-size:var(--fs-xs)}

  .fbx-in .thanks.big .bubble::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;background:var(--white);border-left:1px solid var(--card-line);border-bottom:1px solid var(--card-line);transform:translateY(-50%) rotate(45deg)}

  .fbx-in .notice{padding:var(--sp-4);border-radius:var(--r-sm);background:var(--info-bg);border:1px solid var(--info-line);margin-top:var(--sp-5);font-size:var(--fs-small)}

  .fbx-in .code{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-lg);letter-spacing:1px;margin:var(--sp-2) 0;word-break:break-all}


  .fbx-in .card{background:var(--white);border:1px solid var(--card-line);border-radius:var(--r-sm);padding:var(--sp-4);margin-bottom:var(--sp-4)}

  .fbx-in .post .meta{font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-1)}

  .fbx-in .uid{margin-left:var(--sp-2);font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-xs)}

  .fbx-in .post .nick{font-weight:700;color:var(--text);margin-right:var(--sp-3);font-size:var(--fs-small)}

  .fbx-in .body{white-space:pre-wrap;word-break:break-word}

  .fbx-in .body.fold{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

  .fbx-in .more{background:none;border:0;padding:var(--sp-2) 0 0;font-size:var(--fs-xs);font-weight:var(--fw-g-body);color:var(--muted);text-decoration:underline;cursor:pointer}

  .fbx-in .badge{display:inline-block;font-size:var(--fs-xs);padding:0 var(--sp-2);border-radius:var(--r-xs);border:1px solid var(--card-line);margin-left:var(--sp-2)}

  .fbx-in .badge.adm{margin:0 var(--sp-2) 0 0;border-color:var(--adm);background:var(--adm);color:var(--white)}

  .fbx-in .row{display:flex;gap:var(--sp-2);align-items:center}

  .fbx-in .row input{flex:1}


  .fbx-in .av{flex:none;width:56px;height:56px;border-radius:50%;background:var(--gray-100);border:1px solid var(--card-line);overflow:hidden;
      -webkit-user-select:none;user-select:none}

  .fbx-in .av img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;-webkit-touch-callout:none}

  .fbx-in .av.sm{width:44px;height:44px}

  .fbx-in .post{display:flex;gap:var(--sp-3);align-items:flex-start}

  .fbx-in .pc{flex:1;min-width:0}

  .fbx-in .picks{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2);max-width:420px}

  .fbx-in .pick{display:block;width:100%;padding:var(--sp-1);border:2px solid transparent;border-radius:50%;background:none;cursor:pointer;line-height:0}

  .fbx-in .pick .av{position:relative;width:100%;height:auto;aspect-ratio:1/1}

  .fbx-in .pick .av img{position:absolute;inset:0}

  .fbx-in .pick.on{border-color:var(--text)}

  .fbx-in .pickbar{margin-top:var(--sp-3)}


  .fbx-in [hidden]{display:none!important}

  .fbx-in .cms{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--card-line);display:flex;flex-direction:column;gap:var(--sp-2)}

  .fbx-in .cm{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) 0}

  .fbx-in .cm .meta{margin-bottom:var(--sp-1)}

  .fbx-in .cm.adm{padding:var(--sp-3) var(--sp-3);border-left:3px solid var(--adm);background:var(--adm-bg);border-radius:0 var(--r-sm) var(--r-sm) 0}

  .fbx-in .cmform{margin-top:var(--sp-2)}

  .fbx-in .cmform input[type=text]{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-small);margin-bottom:var(--sp-2)}

  .fbx-in .cmform textarea{min-height:80px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-small)}

  .fbx-in .cmbar{display:flex;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2)}

  .fbx-in .cmmsg{font-size:var(--fs-small);font-weight:700;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);margin-top:var(--sp-2);line-height:1.6}

  .fbx-in .cmmsg:empty{display:none}

  .fbx-in .cmmsg.err{color:var(--alert);background:var(--alert-bg);border:1px solid var(--alert)}

  .fbx-in .cmmsg.ok{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok)}

  .fbx-in .cmmsg.muted{color:var(--muted);background:var(--tint-soft);border:1px solid var(--card-line);font-weight:400}


  .fbx-in .warnnote{color:var(--rule);font-size:var(--fs-small);font-weight:700;margin-top:var(--sp-3)}

  .fbx-in .codebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);margin:0 0 var(--sp-4);padding:var(--sp-3) var(--sp-3);border:1px solid var(--card-line);border-radius:var(--r-sm);background:var(--tint-soft);font-size:var(--fs-xs);color:var(--muted)}

  .fbx-in .codebar .cl{width:100%;color:var(--text);font-size:var(--fs-body)}

  .fbx-in .codebar .cn{width:100%;font-size:var(--fs-xs);line-height:1.7;margin-bottom:var(--sp-1);color:var(--rule);font-weight:700;white-space:pre-line}

  .fbx-in .codebar .crow{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3) var(--sp-3);background:var(--white);border:2px solid var(--text);border-radius:var(--r-sm)}

  .fbx-in .codebar code{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-body);letter-spacing:1px;color:var(--text);word-break:break-all;flex:1;min-width:0}

  .fbx-in .ownset{margin-top:var(--sp-4);border-top:1px dashed var(--card-line)}

  .fbx-in .ownset .setrow{border-top:0;padding:var(--sp-4) 0 0}

  @container fbx (min-width:521px){.fbx-in .ownset .setrow{row-gap:var(--sp-6)}}
   /* 見出し「みんなのコメント」と、選択肢の間：手が見出しに被らないように広く */
  @container fbx (max-width:520px){.fbx-in .ownset .setrow{padding-bottom:var(--sp-8)}}

  .fbx-in .ownset .ownacts,.fbx-in .ownset .ownconf{margin-top:calc((var(--sp-8) + var(--sp-6) + var(--sp-2)) * var(--hs, 1))}
   /* 魔人の手（下に長い）が、非公開・削除ボタンにも、「非公開にしますか？」などの確認の枠にも、被らないように（ボタンを押すと、ボタンの代わりに枠が出る＝枠の上にも、同じ空間を取る） */
  @container fbx (max-width:520px){.fbx-in .ownset .ownacts,.fbx-in .ownset .ownconf{margin-top:var(--sp-4)}}

  /* 「みんなのコメント」の変更の結果（保存中…など）は、選択欄の下。手のための空間は、メッセージの上に取る（メッセージがあるときは、操作ボタン・確認の枠の上は、ふつうの余白） */
  .fbx-in .ownset .modemsg.flash{margin:calc((var(--sp-8) + var(--sp-6) + var(--sp-4)) * var(--hs, 1)) 0 0}

  .fbx-in .ownset .modemsg:empty{display:none}

  .fbx-in .ownset .modemsg:not(:empty)~.ownacts,.fbx-in .ownset .modemsg:not(:empty)~.ownconf{margin-top:var(--sp-4)}

  @container fbx (max-width:520px){.fbx-in .ownset .modemsg.flash{margin-top:var(--sp-4)}}

  .fbx-in .ownset .seg-slap span{padding:var(--sp-2) var(--sp-3)}
   /* 3つ並べても、スマホの幅に収まるように、左右の余白は少し狭く */
  .fbx-in .ownset .seg{max-width:100%}
   /* 狭い画面で、はみ出さない：3つの選択肢は、幅が足りないときだけ、文字の途中（\u200b の所）で折り返す。文字の大きさは変えない */
  .fbx-in .ownset .seg-slap label{display:flex}
   /* 縮んでも、文字の幅（誰でも＝3文字）より小さくならない（小さくなると、文字が枠からはみ出して、手とずれる） */   /* 1行の項目（誰でも）も、2行の項目と同じ高さに伸びて、文字は上下の真ん中 */
  .fbx-in .ownset .seg-slap span{display:flex;align-items:center;justify-content:center;flex:1;white-space:normal;word-break:keep-all;text-align:center;line-height:1.5}
   /* 折り返すのは、\u200b の所だけ（「誰でも」は割らない） */
  .fbx-in .ownset .flash{margin:var(--sp-3) 0 0}

  .fbx-in .ownacts{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);margin-top:var(--sp-5)}

  .fbx-in .ownconf{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid var(--alert);border-radius:var(--r-sm);background:var(--alert-bg);font-size:var(--fs-small)}

  .fbx-in .ownconf.caution{border-color:var(--caution-line);background:var(--caution-bg)}

  .fbx-in .ownconf span{width:100%;font-weight:700}


  .fbx-in .total{text-align:center;font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--sp-4)}

  .fbx-in .pager{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-5)}

  .fbx-in .dots{align-self:center;color:var(--muted)}


  .fbx-in .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  .fbx-in section{display:none}

  .fbx-in section.on{display:block}


  /* ===== 「みんなの感想」「返信を見る」：右へ右へとずれないように =====
     アイコンは、名前〜IDの横（行の先頭）に置き、本文・返信は、左から全幅で並べる。自分の投稿のセリフ（吹き出し）は、アイコンの上（しっぽは下向き）。
     返信は、アイコンぶんは右にずらさず、少しだけ右へ（.cms）。フォームの幅は最大560pxなので、スマホ・タブレット・PCで同じ */
  .fbx-in .cms{padding-left:var(--sp-5)}
   /* 返信は、感想より、はっきり右へ（ただし、アイコンぶんほど大きくは、ずらさない） */
  .fbx-in .post{display:grid;grid-template-columns:auto 1fr;gap:0 var(--sp-3);align-items:center}

  .fbx-in .post::before{content:"";grid-column:1/-1;grid-row:1}
   /* 1行目（セリフの行）を、セリフがなくても残す。これがないと、本文が1行目に入って、アイコンより上に出てしまう */
  .fbx-in .post>.av{grid-column:1;grid-row:2}

  .fbx-in .post>.pc{display:contents}

  .fbx-in .post>.pc>*{grid-column:1/-1;min-width:0}

  .fbx-in .post>.pc>*:empty{display:none}
   /* 空の要素（画像のない作品欄など）が、行を1つ取って、上に余白ができないように */
  .fbx-in .post>.pc>.meta{grid-column:2;grid-row:2;margin:0}

  .fbx-in .post .nick{display:block;margin:0 0 var(--sp-1)}

  .fbx-in .post>.pc>.thanks{grid-row:1;margin:0 0 var(--sp-4)}

  .fbx-in .post>.pc>*:not(.meta):not(.thanks){margin-top:var(--sp-3)}
   /* 名前の行と、本文・返信の間 */
  .fbx-in .says .thanks .bubble::before{left:calc(28px - 6px);top:auto;bottom:-7px;border:0;border-right:1px solid var(--card-line);border-bottom:1px solid var(--card-line)}
   /* 吹き出しは、アイコンの上。しっぽは、下のアイコンへ向ける */
  .fbx-in .thanks.big{flex-direction:column-reverse;align-items:flex-start}
   /* 吹き出しが上、アイコンが下 */
  .fbx-in .thanks.big .bubble{align-self:stretch}

  .fbx-in .thanks.big .bubble::before{left:calc(36px - 6px);top:auto;bottom:-7px;transform:rotate(45deg);border:0;border-right:1px solid var(--card-line);border-bottom:1px solid var(--card-line)}

  .fbx-in .cm{display:grid;grid-template-columns:auto 1fr;gap:0 var(--sp-3);align-items:center}

  .fbx-in .cm>.av{grid-column:1;grid-row:1}

  .fbx-in .cm>.pc{display:contents}

  .fbx-in .cm>.pc>*{grid-column:1/-1;min-width:0}

  .fbx-in .cm>.av~.pc>.meta{grid-column:2;grid-row:1}

  .fbx-in .cm>.pc>*:not(.meta){margin-top:var(--sp-2)}

  .fbx-in .cm .nick{display:inline;margin:0 var(--sp-3) 0 0}


  /* 確認コードのコピー：文字ではなく、モノクロの絵文字（押すとチェックになり、もとに戻る）。コードは折り返さない */
  .fbx-in .mini.ico{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-width:40px;padding:0 var(--sp-3)}

  .fbx-in .mini.ico .ci{display:inline-flex}

  .fbx-in .coderow{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-2) 0}

  .fbx-in .coderow .code{margin:0;flex:1;min-width:0}

  .fbx-in .code,.fbx-in .codebar code{white-space:nowrap;word-break:normal;font-size:min(var(--fs-lg),4.6cqw)}

  .fbx-in .codebar code{font-size:min(var(--fs-body),4.6cqw)}


  .fbx-in .codehint{margin-top:var(--sp-2);font-size:var(--fs-small);color:var(--muted);line-height:1.6}
   /* 入力欄のヒント：入力欄の中の文字(placeholder)は、スマホで途切れるので、短くして、説明は下に出す */