/* ともクロゼット テスト版（スマホ向け。PCでは中央に細く表示） */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface2:#F4F6F9; --ink:#1C2333; --muted:#5B6577; --line:#D8DDE6;
  --ai:#2F4B7C; --on-ai:#FFFFFF; --ai-soft:#E2E8F2; --yamabuki:#C98A0E; --yama-soft:#FBEFD3;
  --ok:#2B7A57; --ok-soft:#DDF0E6; --warn:#B0412C; --warn-soft:#F7E2DD;
  --tomo-bg:#FDEEF0; --tomo-line:#F5C9D2; --tomo-ink:#7A4452; --pink:#E3809A;
  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#E9EDF3;color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6}
.app{max-width:480px;height:100%;margin:0 auto;background:var(--surface2);display:flex;flex-direction:column;position:relative}
.appbar{display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;position:relative;z-index:2;
  background:linear-gradient(180deg,#FBDDE4 0%,#FDEDE6 100%);border-bottom:1px solid #F2C9D2}
.appbar .iconbtn{color:#8A4E5A}
/* 上の帯：ともクロZちゃんの部屋の絵（web/bg/bar.jpg）。キャラは右下、文字とボタンは読みやすいよう白い下地をつける */
.appbar{background:#F6D3D8 url("bg/bar.jpg") right bottom/cover no-repeat;min-height:calc(min(100vw,480px) * .2);align-items:flex-start;border-bottom:1px solid #EFC3CC}
.appbar .iconbtn{background:rgba(255,255,255,.8);border-radius:50%;width:36px;height:36px;box-shadow:0 1px 3px rgba(150,80,95,.18)}
.appbar .backbtn{border-radius:12px;width:auto;height:38px;padding:0 6px}
.appbar .brand{text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff;font-size:1.35rem}
.appbar .logo-word.sm{font-size:clamp(1.4rem,6.4vw,2rem)}  /* スマホの幅では、右のボタンにかからない大きさに */
.appbar .logo{display:none}  /* 帯の絵にキャラがいるので、ロゴ横の顔は出さない（その分ロゴを大きく） */
.appbar .whoami{position:static;flex:none;flex-basis:auto;margin:-2px 0 0;justify-content:flex-start;background:rgba(255,255,255,.8);border-radius:999px;padding:2px 10px 2px 3px;box-shadow:0 1px 3px rgba(150,80,95,.15)}
/* ログイン中の人（バーの下の段に、いつも表示） */
.appbar{flex-wrap:wrap;row-gap:4px}
/* 入力欄に見えないよう、枠も背景もなし・右寄せの小さな文字にする */
.whoami{flex-basis:100%;display:flex;align-items:center;justify-content:flex-end;gap:5px;border:0;background:none;padding:0 4px;margin-top:-2px;font:inherit;font-size:.74rem;color:#9B6A76;cursor:pointer;min-width:0}
.whoami .avatar.xs{width:18px;height:18px;font-size:.62rem}
.whoami b{color:var(--ink);max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.whoami .mail{margin-left:auto;font-size:.7rem;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* 戻る：矢印の下に小さく「戻る」 */
.appbar .backbtn{width:auto;padding:0 4px;display:flex;flex-direction:column;gap:0;line-height:1}
.appbar .backbtn svg{width:20px;height:20px}
.appbar .backbtn small{font-size:.58rem;font-weight:700}
.appbar .brand{font-family:var(--display);font-weight:700;font-size:1.1rem;color:var(--ai);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.appbar .logo{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1.5px solid var(--tomo-line)}
.iconbtn{border:0;background:transparent;color:var(--ink);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;position:relative;flex:none}
.iconbtn svg{width:22px;height:22px}
.dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--yamabuki)}
.screen{flex:1;overflow-y:auto;padding:14px}
/* 下のメニュー：部屋の床のような淡いベージュ＋上のふちは雲のもこもこ */
.nav{position:relative;display:grid;grid-template-columns:repeat(5,1fr);padding:10px 4px calc(env(safe-area-inset-bottom,0px) + 8px);
  background:linear-gradient(180deg,#FFF8F3 0%,#FBE9DE 100%)}
.nav::before{content:"";position:absolute;left:0;right:0;top:-10px;height:12px;pointer-events:none;
  background:radial-gradient(circle at 12px 12px,#FFF8F3 11px,#F2C9D2 11.5px,#F2C9D2 12.5px,transparent 13px) 0 0/24px 12px repeat-x}
.nav button{border:0;background:transparent;color:#9A7A72;font:inherit;font-size:.68rem;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0;cursor:pointer}
.nav button svg{width:22px;height:22px}
.nav button{line-height:1.15;text-align:center;white-space:nowrap}
.nav button[aria-current="page"]{color:var(--pink);font-weight:700}
.nav .plus{width:44px;height:44px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;margin-top:-20px;border:3px solid #FFF8F3;box-shadow:0 4px 10px rgba(200,110,130,.35)}
/* 絵のアイコン：ピンクの台の上に言葉をのせる */
/* 列の幅を絵の幅に比例させる → 全部同じ縮尺になり、台の高さとすき間がそろう */
/* 絵の幅は --w（元の絵の幅）× 同じ倍率 → 縮尺がそろい、台の高さもそろう。言葉は絵の下 */
.nav{align-items:end;padding:2px 4px calc(env(safe-area-inset-bottom,0px) + 4px)}
.nav button{padding:0;min-width:0;gap:1px;position:relative}
/* アイコンの間に、うすい点線の区切り */
.nav button + button::before{content:"";position:absolute;left:0;top:14%;bottom:24%;width:2px;
  background:radial-gradient(circle,#E2A1B3 1px,transparent 1.3px) center top/2px 5px repeat-y}
.nav .navi{position:relative;display:block;transition:transform .15s}
.nav .navi img{display:block;width:calc(var(--w) * .3px);height:auto;filter:saturate(.75);opacity:.8}
.nav .nl{display:block;font-family:var(--display);font-weight:700;font-size:.62rem;line-height:1.2;color:inherit;white-space:nowrap;pointer-events:none}
.nav button[aria-current="page"] .navi img{filter:drop-shadow(0 3px 5px rgba(224,128,154,.55));opacity:1}
.nav .navi .badge{top:2px;right:-4px}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--yamabuki);outline-offset:2px}

.sec-title{font-family:var(--display);font-weight:700;font-size:1rem;margin:14px 0 10px}
.hint{font-size:.78rem;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:3px 11px;font:inherit;font-size:.78rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ai);border-color:var(--ai);color:var(--on-ai)}
.btn{display:block;width:100%;border:0;border-radius:12px;padding:12px 14px;font:inherit;font-weight:700;cursor:pointer;background:var(--ai);color:var(--on-ai);text-align:center}
.btn.sub{background:var(--surface);color:var(--ai);border:1.5px solid var(--ai)}
.btn.pink{background:var(--pink);color:#fff}
/* 取り下げ：やめる操作なので赤系の枠。LINEで送る：LINEの緑 */
.btn.warn{background:var(--surface);color:var(--warn);border:1.5px solid var(--warn)}
.btn.line{background:#06C755;color:#fff}
.btn > svg{width:18px;height:18px;vertical-align:-3px;margin-right:5px}
.btn.warn,.btn.danger{display:flex;align-items:center;justify-content:center;gap:6px}
.btn.warn svg,.btn.danger svg{width:18px;height:18px}
.btn.danger{background:var(--warn);color:#fff}
.btn.warn svg,.btn.danger svg,.wd-confirm b svg{stroke:currentColor}
.deal{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.wd-confirm{margin-top:10px;background:var(--warn-soft);border:1.5px solid var(--warn);border-radius:12px;padding:12px}
.wd-confirm b{display:flex;align-items:center;gap:6px;color:var(--warn)}
.wd-confirm b svg{width:18px;height:18px}
.wd-confirm p{margin:4px 0 10px;font-size:.85rem}
/* Myクローゼット：品名と状態の間の、小さいLINEボタン */
.linebtn{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;border:0;background:#06C755;color:#fff;font:inherit;font-size:.62rem;font-weight:700;line-height:1.15;padding:5px 8px;border-radius:10px;cursor:pointer}
.linebtn svg{width:18px;height:18px;fill:#fff;stroke:none}
.btn.ghost{background:transparent;color:var(--muted);border:1px dashed var(--line);font-weight:400}
.btn:disabled{opacity:.45;cursor:not-allowed}
.stack{display:flex;flex-direction:column;gap:10px}
.row2b{display:flex;gap:8px}
.row2b>*{flex:1}
.box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.info{border-radius:12px;padding:10px 12px;font-size:.82rem}
.info.ok{background:var(--ok-soft);color:var(--ok)}
.info.warn{background:var(--warn-soft);color:var(--warn)}
.info.ai{background:var(--ai-soft);color:var(--ai)}

/* フォーム */
.field label,.field .lbl{display:block;font-weight:700;font-size:.85rem;margin-bottom:5px}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=number],.field input[type=date],.field textarea,.field select{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px;font:inherit;font-size:16px}
.field textarea{min-height:80px;resize:vertical}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.seg button{border:0;background:transparent;font:inherit;font-size:.82rem;padding:8px 4px;border-radius:8px;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ai);color:var(--on-ai);font-weight:700}
.toggle{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:.88rem;cursor:pointer}
.toggle input{margin-top:4px;accent-color:var(--ai)}
.photos{display:flex;gap:8px;flex-wrap:wrap}
.photos .ph{width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--ai-soft);position:relative}
.photos .ph img{width:100%;height:100%;object-fit:cover}
.photos .ph .n{position:absolute;left:4px;top:4px;background:var(--pink);color:#fff;font-size:.6rem;border-radius:999px;padding:0 6px}
.photos .ph-del{position:absolute;right:3px;top:3px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(40,30,35,.65);color:#fff;font-size:15px;line-height:24px;padding:0;cursor:pointer}
.photos .ph-first{position:absolute;left:3px;right:3px;bottom:3px;border:0;border-radius:6px;background:rgba(255,255,255,.88);color:var(--tomo-ink);font:inherit;font-size:.6rem;font-weight:700;padding:2px 0;cursor:pointer}
.photos label.add{width:84px;height:84px;border-radius:10px;border:2px dashed var(--line);display:grid;place-items:center;color:var(--muted);font-size:.75rem;text-align:center;cursor:pointer;background:var(--surface)}

/* ホーム上部 */
/* ホーム上部：ともクロZちゃんの部屋（ラグの上に座る）。文字側は白くぼかして読みやすく */
.hero{margin:-14px -14px 6px;padding:12px 14px 8px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,0) 30%,rgba(255,250,248,.82) 58%,rgba(255,250,248,.9) 100%),url("bg/room.jpg") 0 calc(min(100vw,480px) * -.74)/100% auto no-repeat #F3D5BD}
.hero img{width:40%;max-width:160px;flex:none;position:relative;filter:drop-shadow(0 6px 8px rgba(160,90,100,.25))}
.hero .cta{white-space:nowrap;padding:7px 12px !important;font-size:.78rem !important}
.hero > div{position:relative}
.hero .fold{background:rgba(255,255,255,.7) !important;border-radius:999px !important}
.hero .t{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.35}
.hero .s{font-size:.8rem;color:var(--muted);margin-top:2px}
.hero .cta{margin-top:10px;border:0;background:var(--pink);color:#fff;border-radius:999px;padding:7px 16px;font:inherit;font-weight:700;font-size:.82rem;cursor:pointer}
.hero .fold{position:absolute;top:6px;right:8px;border:0;background:transparent;color:var(--tomo-ink);font:inherit;font-size:.7rem;cursor:pointer;padding:4px}
/* 文字のかたまりは右の空きいっぱいに広げて、中央にそろえる */
.hero .hero-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .t{font-size:1.45rem}
.hero .cta{display:inline-flex;align-items:center;gap:6px}
.hero .cta svg{width:18px;height:18px;flex:none}
/* たたんだ時：細い帯。部屋の絵はやめて淡いピンク、右にカメラの丸ボタン */
.hero.small{padding:6px 14px;min-height:0;gap:8px;background:linear-gradient(90deg,#FBE3E8,#FDF1EA)}
.hero.small img{width:40px;margin:-2px 0}
.hero.small .hero-txt{flex-direction:row;justify-content:space-between;gap:8px;padding-right:44px}
.hero.small .t{font-size:.95rem;line-height:1.3}
.hero.small .cta{margin-top:0;width:34px;height:34px;padding:0 !important;justify-content:center;border-radius:50%}
.hero.small .fold{top:50%;transform:translateY(-50%)}

/* 商品カード（雲のふち） */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:54px 8px;padding-top:44px}
.card{position:relative;overflow:visible;padding:0;border:20px solid transparent;background-clip:padding-box;background-color:#FFFFFF;color:var(--ink);
  border-image-source:var(--frame-cloud);border-image-slice:24;border-image-width:20px;border-image-repeat:round;text-align:left;font:inherit;cursor:pointer}
.card .img{aspect-ratio:1/1;border-radius:10px;margin:2px;background:var(--ai-soft);overflow:hidden;display:grid;place-items:center;color:var(--muted);font-size:.75rem}
.card .img img{width:100%;height:100%;object-fit:cover}
.card .b{padding:6px 4px 2px;display:flex;flex-direction:column;gap:1px;min-width:0}
.card .t{font-weight:700;font-size:.85rem;line-height:1.35;overflow-wrap:anywhere}
.price{font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--yamabuki)}
.price.free{color:var(--ok)}
.who{font-size:.7rem;color:var(--muted)}
.ribbon{position:absolute;left:-20px;top:6px;z-index:2;background:var(--pink);color:#fff;font-size:.62rem;font-weight:700;padding:1px 9px 1px 6px;border-radius:0 999px 999px 0}
.peek-top{position:absolute;left:50%;transform:translateX(-50%);top:-69px;width:80px;z-index:3;pointer-events:none}
.point-back{position:absolute;right:-26px;bottom:-28px;width:40px;z-index:3;pointer-events:none}

/* 探しています */
.wishes{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.wish{flex:none;width:170px;background:var(--surface);border:1.5px dashed var(--tomo-line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:4px}
.wish b{font-size:.88rem}
.wish .btn{padding:6px;font-size:.78rem}
.wish-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:18px;padding:12px 14px;border:1.5px dashed var(--tomo-line);border-radius:14px;background:var(--surface);text-align:left;font:inherit;color:inherit;cursor:pointer}
.wish-banner b{display:block;font-size:.9rem}
.searchbar{display:flex;gap:8px}
.searchbar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px;font:inherit;font-size:16px}
.searchbar .btn{width:auto;flex:none;padding-left:18px;padding-right:18px}
.wish-banner small{display:block;font-size:.76rem;opacity:.75;margin-top:2px}
.wish-banner .arrow{font-size:1.4rem;opacity:.5}
.friends-link{margin:0 0 14px;border-style:solid}
.friends-link .ic svg{width:24px;height:24px;color:var(--pink)}
.friends-link .grow{flex:1}
a.wish-banner{text-decoration:none}
/* Myクローゼット：上の小さな入口3つ */
/* 上の入口3つ：それぞれ色つきの背景＋丸いアイコン */
.mine-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.mine-links button{display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:10px 4px;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.mine-links .ml-fav{background:#FDE3EA;color:#B8476A}
.mine-links .ml-fr{background:#E3ECFA;color:#2F55A8}
.mine-links .ml-set{background:#ECEAF0;color:#5B5566}
.mine-links .mi{width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.mine-links svg{width:16px;height:16px}
.mine-links .heart{color:var(--pink);font-size:.95rem;line-height:1}
/* Myクローゼット：状態ごとの色分け（タブと箱の左の帯が同じ色） */
.mt-req,.st-req,.tl-req,.sec-req{--c:#E3809A;--c-soft:#FDEEF0}
.mt-open,.st-open,.tl-open,.sec-open{--c:#4FA383;--c-soft:#E3F4EC}
.mt-deal,.st-deal,.tl-deal,.sec-deal{--c:#E09A3E;--c-soft:#FCF0DE}
.mt-done,.st-done,.tl-done,.sec-done{--c:#9C97A0;--c-soft:#F1EFF2}
.mt-asking,.st-asking,.tl-asking,.sec-asking{--c:#5B7FD0;--c-soft:#E6EDFA}
.tl-all{--c:#2F4B7C;--c-soft:#E2E8F2}
/* 管理ページらしく：上に数字の箱（押すと絞り込み） */
.mine-tiles-wrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;margin-bottom:16px}
.mine-tiles-wrap .mtw-t{font-size:.75rem;color:var(--muted);font-weight:700;margin:0 2px 8px}
.mine-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mine-tiles .tile{display:flex;flex-direction:column;align-items:flex-start;gap:0;border:0;border-left:5px solid var(--c);background:var(--c-soft);border-radius:12px;padding:8px 10px;font:inherit;cursor:pointer;text-align:left}
.mine-tiles .tile b{font-family:var(--display);font-size:1.5rem;line-height:1.1;color:var(--c)}
.mine-tiles .tile span{font-size:.72rem;color:var(--muted);font-weight:700;white-space:nowrap}
.mine-tiles .tile[aria-pressed="true"]{background:var(--c);border-color:var(--c)}
.mine-tiles .tile[aria-pressed="true"] b,.mine-tiles .tile[aria-pressed="true"] span{color:#fff}
/* 区分の見出し */
.mine-sec{display:flex;align-items:center;gap:8px;margin:18px 0 8px;font-weight:700;font-size:.92rem;color:var(--c)}
.mine-sec .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.mine-sec b{background:var(--c-soft);color:var(--c);border-radius:999px;padding:0 8px;font-size:.75rem;line-height:20px}
.mine-sec:first-of-type{margin-top:0}
.mine-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:14px}
.mine-tabs .mt-lbl{flex-basis:100%;font-size:.75rem;color:var(--muted);margin-top:4px}
.mine-tabs .mt{display:flex;align-items:center;gap:6px;border:1.5px solid var(--c);background:var(--surface);color:var(--c);border-radius:999px;padding:5px 10px 5px 12px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.mine-tabs .mt b{background:var(--c-soft);color:var(--c);border-radius:999px;min-width:22px;padding:0 6px;font-size:.75rem;line-height:20px;text-align:center}
.mine-tabs .mt[aria-pressed="true"]{background:var(--c);color:#fff}
.mine-tabs .mt[aria-pressed="true"] b{background:#fff}
/* 箱の背景も区分の色に。同じ区分の中では1つおきに濃さを変えて、境目を見やすく */
.mbox{margin-bottom:12px;border-left:6px solid var(--c);background:var(--c-soft)}
.mbox.alt{background:color-mix(in srgb,var(--c-soft) 40%,#fff)}
/* 終わった物は白（ほかの区分より目立たせない） */
.mbox.st-done,.mbox.st-done.alt{background:var(--surface)}
.mbox .tools .ic{box-shadow:0 0 0 2px #fff}
.mbox .reqs{background:rgba(255,255,255,.65);border:1px solid color-mix(in srgb,var(--c) 30%,#fff)}
.mbox .tools{border-top-color:color-mix(in srgb,var(--c) 25%,#fff)}
.mbox .mhead{background:transparent}
/* 手を挙げた人：その箱の色のうすい囲み＋ピンクの「この人に決める」 */
.reqs{background:var(--c-soft);border-radius:12px;padding:10px;margin-bottom:10px}
.reqs-t{margin:0 0 6px;font-weight:700;font-size:.9rem;color:var(--c)}
.reqs-t small{margin-left:8px;font-weight:400;color:var(--muted);font-size:.72rem}
.req{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:7px 8px;margin-top:6px}
.req .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req .decide-btn,.req .decline-btn{white-space:nowrap}
.decide-btn{flex:none;border:0;background:var(--pink);color:#fff;font:inherit;font-weight:700;font-size:.85rem;border-radius:999px;padding:7px 14px;cursor:pointer}
.decline-btn{flex:none;border:1.5px solid #D9A6A0;background:#fff;color:#B0412C;font:inherit;font-weight:700;font-size:.8rem;border-radius:999px;padding:6px 12px;cursor:pointer;margin-right:2px}
.decline-btn.sure{background:#B0412C;color:#fff;border-color:#B0412C}
.decide-btn.wide{display:block;width:100%;border-radius:12px;padding:11px}
/* そのほかの操作：丸いアイコン＋下に文字（役目ごとに色）。上と、ボタンの間にうすい区切り */
.tools{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);padding-top:8px}
.tools button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;font:inherit;font-size:.72rem;color:#5B6577;padding:2px 0;cursor:pointer}
.tools button + button::before{content:"";position:absolute;left:0;top:8px;bottom:8px;border-left:1px solid var(--line)}
.tools .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.tools svg{width:20px;height:20px}
.tools .t-v .ic{background:#EEF1F6;color:#4A5568}
.tools .t-e .ic{background:#E6EDFA;color:#3D63B8}
.tools .t-x .ic{background:#E3F4EC;color:#2E7D5B}
.tools .t-d .ic{background:#FBE6E1;color:#B0412C}
.tools .t-l .ic{background:#06C755;color:#fff}
.tools .t-l svg{fill:#fff;stroke:none}
.tools{grid-template-columns:repeat(4,1fr)}
/* 品名の横の「掲載ページ」 */
.pagebtn{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1.5px solid #9FB6E8;background:#E6EDFA;color:#2F55A8;border-radius:12px;padding:6px 8px;font:inherit;font-size:.7rem;font-weight:700;cursor:pointer;white-space:nowrap;line-height:1.2}
.pagebtn svg{width:20px;height:20px}
.tools button{font-size:.66rem;white-space:nowrap}
/* 手を挙げた人がいないとき：品名の横に小さなキャラ＋吹き出し */
/* 幅を固定して、どの箱でも「掲載ページを見る」とキャラの位置がそろうようにする */
.mini-talk{flex:none;display:flex;align-items:center;gap:2px;width:150px}
.mini-talk span{flex:1;min-width:0}
.mini-talk img{width:38px;height:38px;object-fit:contain;flex:none}
.mini-talk span{position:relative;background:var(--tomo-bg);border:1px solid var(--tomo-line);border-radius:10px;padding:4px 8px;font-size:.68rem;line-height:1.35;color:var(--tomo-ink);font-family:var(--display);font-weight:700}
.mini-talk span::before{content:"";position:absolute;left:-6px;top:50%;margin-top:-5px;border:5px solid transparent;border-right:6px solid var(--tomo-line);border-left:0}
.tools .t-d{color:#B0412C}
.tools button:disabled{opacity:.5;cursor:default}
.mbox.st-done{opacity:.85}
.fav-link .ic.heart{width:24px;text-align:center;color:var(--pink);font-size:1.2rem;line-height:1}
/* 登録時の同意チェックと、規約へのリンク */
.agree{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;line-height:1.5;cursor:pointer}
.agree input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--pink)}
.agree a,.terms-link{color:#C25A78}
.terms-link{display:block;text-align:center;font-size:.8rem;margin-top:2px}
/* 運営管理の入口は、利用者向けと区別できるよう紺に */
.admin-link{background:#1F2D4D;border-color:#1F2D4D;color:#fff}
.admin-link .ic svg{color:#F2B4C4}

/* ともクロZちゃんの吹き出し */
.talk{background:var(--tomo-bg);border:1px solid var(--tomo-line);border-radius:16px;padding:10px 12px 10px 8px;margin-bottom:12px;color:var(--tomo-ink)}
.bubble{position:relative;background:var(--surface);border:1.5px solid var(--tomo-line);border-radius:16px;padding:9px 14px;font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.45}
.bubble.down{width:fit-content;max-width:calc(100% - 4px);margin:0 0 10px 4px}
.bubble.down::before{content:"";position:absolute;left:34px;bottom:-10px;border:9px solid transparent;border-top:10px solid var(--tomo-line);border-bottom:0}
.bubble.down::after{content:"";position:absolute;left:36px;bottom:-7px;border:7px solid transparent;border-top:8px solid var(--surface);border-bottom:0}
.talk .top{display:flex;align-items:center;gap:10px}
.talk .top .bubble{flex:1;min-width:0}
.talk .top .bubble::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-8px;border:8px solid transparent;border-right:10px solid var(--tomo-line);border-left:0}
.talk .top .bubble::after{content:"";position:absolute;left:-7px;top:50%;margin-top:-7px;border:7px solid transparent;border-right:8px solid var(--surface);border-left:0}
.talk .row2{display:flex;align-items:center;gap:6px}
.talk ul{margin:0;padding-left:1em;font-size:.76rem;line-height:1.7}
.talk li{white-space:nowrap}
.talk p{margin:0;font-size:.82rem;line-height:1.7}
.talk .from{font-size:.72rem;font-weight:700;margin:0 0 4px 6px}
.ch{margin:0;display:flex;flex-direction:column;align-items:center;flex:none}
.ch img{height:84px;max-width:96px;object-fit:contain}
.ch figcaption{font-size:.5rem;font-weight:700;color:var(--tomo-ink);white-space:nowrap;transform:scale(.8);transform-origin:center top;opacity:.85}

/* 一覧・行 */
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;color:inherit;text-align:left;width:100%}
button.row{cursor:pointer}
.row .grow{flex:1;min-width:0}
.row .grow b{display:block;font-size:.9rem}
.row .face{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--tomo-bg)}
.row .thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;background:var(--ai-soft)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--ai-soft);color:var(--ai);display:grid;place-items:center;font-weight:700;font-family:var(--display);flex:none}
.pill{font-size:.66rem;border-radius:999px;padding:1px 8px;white-space:nowrap;font-weight:700}
.pill.y{background:var(--yama-soft);color:var(--yamabuki)}
.pill.g{background:var(--ok-soft);color:var(--ok)}
.pill.b{background:var(--ai-soft);color:var(--ai)}
.pill.n{background:var(--surface2);color:var(--muted)}
.smallbtn{border:1px solid var(--ai);color:var(--ai);background:var(--surface);border-radius:8px;padding:4px 10px;font:inherit;font-size:.75rem;cursor:pointer;font-weight:700}
.smallbtn.fill{background:var(--ai);color:var(--on-ai)}

/* 詳細 */
/* お気に入り：商品ページの品名の横、カードの右上 */
.title-row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.title-row h2{flex:1;min-width:0}
.favbtn{flex:none;margin-top:10px;border:1.5px solid var(--pink);background:#fff;color:#C25A78;font:inherit;font-weight:700;font-size:.82rem;padding:6px 12px;border-radius:999px;cursor:pointer}
.favbtn[aria-pressed="true"]{background:var(--pink);color:#fff}
.pub{display:block;font-size:.7rem;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pub.on{color:#2E7D5B}
.pub.off{color:#9C97A0}
.favn{margin-left:8px;color:var(--pink);font-weight:700}
.card .fav-mark{position:absolute;right:4px;top:4px;z-index:3;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--pink);display:grid;place-items:center;font-size:15px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
/* 商品ページ：持ち主さんの横の「質問する」 */
.askbtn{flex:none;display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--pink);background:var(--tomo-bg);color:#C25A78;font:inherit;font-weight:700;font-size:.85rem;padding:7px 14px;border-radius:999px;cursor:pointer}
.askbtn svg{width:17px;height:17px}
.gal-wrap{position:relative}
.gal-count{position:absolute;right:10px;bottom:10px;background:rgba(40,30,35,.6);color:#fff;font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:999px;pointer-events:none}
.gal-thumbs{display:flex;gap:6px;margin-top:8px;overflow-x:auto}
.gal-thumbs button{flex:none;width:56px;height:56px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer;opacity:.6}
.gal-thumbs button[aria-pressed="true"]{border-color:var(--pink);opacity:1}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.gallery{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px}
.gallery img{width:100%;flex:none;aspect-ratio:1/1;object-fit:cover;scroll-snap-align:start;border-radius:14px;background:var(--ai-soft)}
.detail h2{font-family:var(--display);font-size:1.25rem;margin:12px 0 2px}
.note{background:var(--surface);border-radius:12px;padding:10px 12px;border:1px solid var(--line);font-size:.9rem;white-space:pre-wrap}

/* チャット */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:78%;padding:8px 11px;border-radius:14px;font-size:.9rem;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--ai);color:var(--on-ai);border-bottom-right-radius:4px}
.msg.you{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
/* 誰の発言か分かるように：相手は左（名前・白）、自分は右（ピンク） */
.mrow{display:flex;align-items:flex-end;gap:6px}
.mrow.me{justify-content:flex-end}
.mrow.you{align-items:flex-start}
.mrow .msg{max-width:100%}
.mrow.you > div{max-width:78%;min-width:0}
.mrow.me > .msg{max-width:78%}
.mname{font-size:.7rem;color:var(--muted);margin:0 0 2px 4px}
.mline{display:flex;align-items:flex-end;gap:6px}
.tm{font-size:.62rem;color:var(--muted);flex:none}
.avatar.sm{width:30px;height:30px;font-size:.8rem}
/* 商品カード：だれの物か分かるように、丸い頭文字＋名前 */
.avatar.xs{width:22px;height:22px;font-size:.7rem;background:var(--tomo-bg);color:#C25A78;border:1px solid var(--tomo-line)}
.card .owner{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:.78rem;color:var(--muted);min-width:0}
.card .owner b{color:var(--ink);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:6.5em}
.msg.me{background:var(--pink) !important;color:#fff !important}
/* 未読の数 */
.nav .ic{position:relative;display:inline-grid;place-items:center}
.badge{position:absolute;top:-5px;right:-11px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#E04F6E;color:#fff;font-size:.62rem;font-weight:700;line-height:18px;text-align:center;border:2px solid #FFF8F3}
.badge.inline{position:static;border:0;margin-right:6px}
/* 送信取消 */
.mtap{border:0;background:transparent;padding:0;font:inherit;cursor:pointer;max-width:78%;display:flex;justify-content:flex-end}
.mtap .msg{width:max-content;max-width:100%;text-align:left}
.unsend-btn{display:flex;justify-content:flex-end;margin-top:-4px}
.unsend-btn button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:1px 10px;font:inherit;font-size:.7rem;cursor:pointer}
.unsent{align-self:center;font-size:.72rem;color:var(--muted);background:var(--surface);border-radius:999px;padding:2px 12px}
.stamp{width:96px;height:auto}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.stamps button{min-width:0;border:1px solid var(--tomo-line);background:var(--tomo-bg);border-radius:12px;padding:4px 6px;display:flex;flex-direction:column;align-items:center;cursor:pointer;font:inherit;color:var(--tomo-ink)}
.stamps img{height:44px;width:auto}
.stamps button[aria-pressed="true"]{border:2px solid var(--pink);background:#FFE1E9;box-shadow:0 0 0 3px rgba(227,128,154,.25)}
.stamps span{font-size:.62rem;font-weight:700}
.quick-lbl{font-size:.72rem;color:var(--muted);margin:14px 0 4px}
.chips.quick .chip{border-style:dashed;background:transparent;color:var(--muted)}
.composer{display:flex;gap:6px;position:sticky;bottom:-14px;background:var(--surface2);padding:10px 0}
.composer input{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:9px 12px;font:inherit;font-size:16px}
.composer button{border:0;background:var(--ai);color:var(--on-ai);border-radius:999px;padding:0 16px;font:inherit;font-weight:700;cursor:pointer}

/* 起動画面・ログイン */
/* ログイン画面の背景：ピンクの空・雲・ハートとキラキラ */
.login{position:relative;margin:-14px;min-height:calc(100% + 28px);padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 28px;overflow:hidden;
  background:#F3D5BD url("bg/room.jpg") center top/100% auto no-repeat}
/* ラグ（絵の高さの約55%）の上にキャラが立つように置く */
.login .splash{padding-top:calc(min(100vw,480px) * 1.2) !important}
.login .splash img{position:absolute;left:50%;transform:translateX(-50%);top:calc(min(100vw,480px) * .66);width:46%;max-width:200px}
.login .sky{position:absolute;inset:0;pointer-events:none}
.login .sky span{position:absolute;line-height:1}
.login .sky .ht{color:#F2A0B5}
.login .sky .sp{color:#F2C96A}
.login .clouds{position:absolute;left:-10%;right:-10%;bottom:-30px;height:180px;
  background:radial-gradient(60px 50px at 10% 60%,#fff 98%,transparent),radial-gradient(80px 60px at 30% 70%,#fff 98%,transparent),radial-gradient(70px 55px at 52% 62%,#fff 98%,transparent),
  radial-gradient(90px 65px at 74% 72%,#fff 98%,transparent),radial-gradient(60px 50px at 94% 60%,#fff 98%,transparent),linear-gradient(#fff,#fff) 0 100%/100% 55% no-repeat;opacity:.9}
@media (prefers-reduced-motion:no-preference){.login .sky span{animation:twinkle 3.2s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}}
.login .splash{position:relative;padding:8px 0 10px}
.login .splash img{filter:drop-shadow(0 8px 14px rgba(200,110,130,.25))}
/* ロゴ風の「ともクロゼット」：丸く太い文字＋白いふち＋1文字ずつ傾き */
.logo-word{margin:4px 0 0;font-family:var(--display);font-weight:900;font-size:2.35rem;line-height:1.1;letter-spacing:.02em;color:#8A5A3C;position:relative;display:inline-flex;align-items:flex-end}
.logo-word span{display:inline-block;transform:rotate(var(--r,0));
  text-shadow:3px 0 #fff,-3px 0 #fff,0 3px #fff,0 -3px #fff,2px 2px #fff,-2px 2px #fff,2px -2px #fff,-2px -2px #fff,0 6px 10px rgba(200,110,130,.35)}
.logo-word span.p{color:#E3809A;font-size:1.12em}
.logo-word .star{color:#F2C14E;font-size:.55em;transform:translate(2px,-1.2em) rotate(12deg)}
.logo-word.sm{margin:0;font-size:1.25rem;line-height:1}
.logo-word.sm span{text-shadow:2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff,1.5px 1.5px #fff,-1.5px 1.5px #fff,1.5px -1.5px #fff,-1.5px -1.5px #fff,0 3px 6px rgba(200,110,130,.3)}
.appbar .brand{font-size:clamp(1.3rem,5.8vw,1.7rem);font-weight:900;padding:2px 0;line-height:1.2}
.appbar .brand.home{overflow:visible}
/* 上の帯：1段目＝題名と右上のボタン、2段目＝名前。帯の高さは絵と同じ比率（横4：縦1）にして、絵が見切れないようにする */
.appbar{min-height:0;aspect-ratio:2000/496;background-size:100% auto;align-content:flex-start;row-gap:2px;padding-bottom:6px}
.appbar .bar-brk{flex-basis:100%;height:0}
.appbar .whoami{margin:0}
/* Myクローゼット（キャラが左）：全部を右寄せ */
/* トップなど（キャラが右）：題名は真ん中より少し上、名前はその下。ボタンは右上のまま */
.appbar:not(.bar-mine){padding-top:calc(env(safe-area-inset-top,0px) + 18px)}
.appbar:not(.bar-mine) > .iconbtn{margin-top:-10px}
.appbar:not(.bar-mine) .whoami{margin-top:4px}
.appbar.bar-mine{background-image:url("bg/bar_mine.jpg");background-position:left bottom}
.appbar.bar-mine .brand{flex:1 1 0;justify-content:flex-end;order:1}
.appbar.bar-mine > .iconbtn:not(.backbtn){order:3}  /* ボタンは2段目の右 */
.appbar.bar-mine .backbtn{order:0}  /* 戻るは1段目の左（キャラの上の空いた所） */
.appbar.bar-mine .bar-brk{display:block;order:2;flex-basis:100%;height:0}
.appbar.bar-mine > .iconbtn:first-of-type:not(.backbtn),.appbar.bar-mine > .backbtn + .iconbtn{margin-left:auto}
.appbar.bar-mine{column-gap:6px;row-gap:2px;padding-top:calc(env(safe-area-inset-top,0px) + 20px);padding-bottom:4px}
/* 帯の高さ（絵の比率）に収まるよう、Myクローゼットでは題名とボタンを少し小さく */
.appbar.bar-mine .brand{font-size:clamp(1.2rem,5.4vw,1.6rem);line-height:1.1;padding:0}
.appbar.bar-mine > .iconbtn:not(.backbtn){width:32px;height:32px}
.appbar.bar-mine > .iconbtn svg{width:19px;height:19px}
.appbar.bar-mine .backbtn{height:34px}
/* 上のボタンは、役目ごとにうすい色（探す＝青、友達＝緑、お知らせ＝黄、戻る＝グレー） */
.appbar .ib-search{background:rgba(222,233,250,.92);color:#2F55A8}
.appbar .ib-friends{background:rgba(222,242,233,.92);color:#2E7D5B}
.appbar .ib-bell{background:rgba(252,239,214,.92);color:#A86E10}
.appbar .backbtn{background:rgba(241,239,242,.92);color:#5B5566}
/* 名前は右上に小さく、目立たせない（白い下地なし・白いふちの文字だけ） */
.appbar.bar-mine .whoami{position:absolute;top:calc(env(safe-area-inset-top,0px) + 4px);right:10px;font-size:.66rem;padding:0;gap:4px;background:none;box-shadow:none;text-shadow:0 0 3px #fff,0 0 3px #fff}
.appbar.bar-mine .whoami b{font-weight:700}
.appbar.bar-mine .whoami .avatar.xs{width:15px;height:15px;font-size:.55rem}
.login .tag{font-size:.85rem;color:var(--tomo-ink)}
.login-card{position:relative;background:rgba(255,255,255,.92);border:1px solid var(--tomo-line);border-radius:20px;padding:16px;box-shadow:0 6px 18px rgba(200,110,130,.15)}
.splash{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 8px}
.splash img{width:70%;max-width:240px}
.splash .lg{font-family:var(--display);font-weight:700;font-size:1.9rem}
.splash .lg em{font-style:normal;color:var(--pink)}
.qr{display:grid;place-items:center}
.qr img{width:180px;height:180px;image-rendering:pixelated}
.code{font-family:ui-monospace,Consolas,monospace;font-size:.78rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;word-break:break-all;user-select:all}

.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px;font-size:.82rem;max-width:92%;z-index:9;text-align:center}
.toast[hidden],[hidden]{display:none !important}
.empty{color:var(--muted);font-size:.85rem;text-align:center;padding:20px 0}

/* ===== 上の帯（最終の配置・決定 2026-10-12）=====
   帯は絵と同じ比率。中身はすべて帯の中に重ねて置く（見切れない・絵にぶつからない）
   トップなど（キャラが右）：題名＝大きく真ん中の少し左／名前＝左下／ボタン＝右上
   Myクローゼット（キャラが左）：題名＝大きく真ん中の少し右／名前＝右上に小さく／ボタン＝右下／戻る＝左上 */
.appbar{display:block !important;position:relative;aspect-ratio:2000/496;min-height:0 !important;padding:0 !important;
  background-size:100% auto;background-position:center bottom}
.appbar .bar-brk{display:none !important}
.appbar .brand{position:absolute !important;left:9%;top:50%;transform:translateY(-62%);margin:0 !important;padding:0 !important;
  max-width:62%;font-size:clamp(1.3rem,6.6vw,2.1rem) !important;line-height:1.1}
.appbar .brand.home{left:9%;max-width:none}
.appbar .brand .logo-word.sm{font-size:clamp(1.6rem,8.3vw,2.6rem) !important}
.appbar .bar-btns{position:absolute;top:8px;right:10px;display:flex;gap:6px}
.appbar .bar-btns .iconbtn{width:34px;height:34px;margin:0 !important}
.appbar .bar-btns svg{width:19px;height:19px}
.appbar .whoami{position:absolute !important;left:10px;bottom:7px;margin:0 !important;font-size:.72rem}
.appbar .backbtn{position:absolute !important;left:8px;top:8px;height:34px;margin:0 !important}
/* 戻るがある画面は、題名を少し右へ（戻るとぶつからないように） */
.appbar:not(.bar-mine) .backbtn ~ .bar-btns{top:8px}
.appbar:not(.bar-mine):has(.backbtn) .brand{left:16%}
/* Myクローゼット */
.appbar.bar-mine .brand{left:auto;right:9%;justify-content:flex-end;transform:translateY(-55%);font-size:clamp(1.3rem,7.3vw,2.2rem) !important;max-width:58%}
.appbar.bar-mine .bar-btns{top:auto;bottom:8px}
.appbar.bar-mine .whoami{left:auto;right:12px;bottom:auto;top:6px;background:none;box-shadow:none;padding:0;font-size:.66rem;text-shadow:0 0 3px #fff,0 0 3px #fff}
.appbar.bar-mine .whoami .avatar.xs{width:15px;height:15px;font-size:.55rem}
/* スマホの細い幅でもキャラにかからないよう、少しだけ小さめに */
.appbar .brand.home{left:7%}
.appbar .brand .logo-word.sm{font-size:clamp(1.5rem,7.6vw,2.5rem) !important}
.appbar:not(.bar-mine) .brand:not(.home){font-size:clamp(1.2rem,6vw,1.9rem) !important;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* スマホの細い幅：Myクローゼットの題名が下のボタンに重ならないよう、題名は上寄せ・少し小さく */
.appbar.bar-mine .brand{top:24%;transform:none;font-size:clamp(1.2rem,6.2vw,2.2rem) !important}
@media (max-width:430px){
  .appbar.bar-mine .bar-btns .iconbtn{width:30px;height:30px}
  .appbar.bar-mine .bar-btns{bottom:6px}
  /* Myクローゼットの箱：品名の列がつぶれないよう、キャラのひとことは下の段へ */
  .mbox .mhead{flex-wrap:wrap}
  .mbox .mhead .mini-talk{order:5;width:100%;justify-content:flex-end;margin-top:4px}
}
@media (max-width:430px){.mbox .mhead .mini-talk span{flex:0 1 auto}}
/* 下のメニュー（決定 A）：言葉はピンクの台の上に、白いふちの文字で。絵は少し大きく */
.nav .navi{position:relative}
.nav .navi img{width:calc(var(--w) * .34px)}
.nav .navi .nl{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);display:block;white-space:nowrap;
  font-family:var(--display);font-weight:900;font-size:.62rem;line-height:1;color:#9B4A5E;
  text-shadow:1.5px 0 #fff,-1.5px 0 #fff,0 1.5px #fff,0 -1.5px #fff,1px 1px #fff,-1px 1px #fff,1px -1px #fff,-1px -1px #fff}
.nav button[aria-current="page"] .navi .nl{color:#E3609A}
/* 2列のボタンは1行に収める */
.row2b .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:6px;padding-right:6px}
/* 注意が必要なボタン（取り消し・取り下げ・削除・やめる・ログアウトなど）：うすい赤の背景＋赤い文字＋アイコンでそろえる */
.btn.caution,.btn.warn{display:flex;align-items:center;justify-content:center;gap:6px;background:#FBE6E1;color:#B0412C;border:1.5px solid #E9B1A5;font-weight:700}
.btn.caution svg,.btn.warn svg{width:18px;height:18px;flex:none}
.smallbtn.caution-s{background:#FBE6E1;color:#B0412C;border-color:#E9B1A5}
/* 注意ボタン（決定 B）：白地に赤い枠、アイコンは赤い丸の中に白で */
.btn.caution,.btn.warn{background:#fff;color:#B0412C;border:2px solid #C4472F}
.btn.caution svg,.btn.warn svg{width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:50%;background:#C4472F;color:#fff;stroke:#fff}
.smallbtn.caution-s{background:#fff;color:#B0412C;border:1.5px solid #C4472F;font-weight:700}
/* ピンクの大事なボタンには、うすい黄色の枠（赤い枠の注意ボタンと区別する。決定） */
.btn.pink{box-shadow:0 0 0 3px #F6D98A}
/* ホームの帯：ロゴの下に正式名を小さく */
.appbar .brand.home{flex-direction:column;align-items:flex-start;gap:2px}
.appbar .brand-sub{display:block;margin-left:6px;font-family:var(--display);font-weight:700;font-size:clamp(.62rem,2.6vw,.8rem);color:#8A5A3C;letter-spacing:.08em;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
.appbar .brand.home{top:43%;gap:0}
/* やりとりの写真 */
.chatimg{display:block;max-width:62vw;max-height:260px;width:auto;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer}
.mrow.me .chatimg{max-width:62vw}
.composer .photo-send{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#DEE9FA;color:#2F55A8;cursor:pointer}
.composer .photo-send svg{width:20px;height:20px}

/* ---------- 交換（2026-10-13） ---------- */
.price.trade{color:#3E8FB0}
.btn svg{vertical-align:-3px}
.offer{background:#fff;border:1px solid var(--tomo-line);border-radius:12px;padding:8px 10px;margin-top:8px}
.offer .req{border:0;padding:2px 0}
.offer-pics{display:flex;gap:6px;overflow-x:auto;margin:6px 0}
.offer-pics img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:none;cursor:pointer}
.offer-note{margin:2px 0 6px;font-size:.85rem;white-space:pre-wrap}
.offer .req .decline-btn{margin-right:8px}
.offer-view{background:#fff;border:1px solid var(--tomo-line);border-radius:12px;padding:10px}
.trade-pair{display:flex;align-items:center;justify-content:center;gap:10px;margin:4px 0 10px}
.trade-pair>div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;max-width:40%}
.trade-pair img{width:84px;height:84px;object-fit:cover;border-radius:12px;border:1px solid var(--tomo-line)}
.trade-pair .tp-ic svg{width:26px;height:26px;color:#3E8FB0}

/* 前に申し込んだ物（交換） */
.offer-past{margin-top:6px;background:#F7F7FA;border:1px dashed #C9CBD6;border-radius:12px;padding:10px}
.offer-past-t{margin:0 0 4px;font-weight:700;font-size:.85rem;color:#666}
.offer-past-t small{margin-left:8px;font-weight:400;font-size:.72rem}
.op-row{padding:6px 0;border-top:1px solid #E6E7EE}
.op-row:first-of-type{border-top:0}
.op-row .offer-pics img{width:56px;height:56px;opacity:.85}
.op-st{font-size:.75rem;color:#777}

/* ---------- やりとり（取引中・交渉中・その他）とお知らせ（2026-10-13） ---------- */
.ctabs{display:flex;gap:6px;margin:0 0 12px}
.ctab{flex:1;border:1.5px solid var(--tomo-line);background:#fff;color:var(--tomo-ink);border-radius:999px;padding:8px 4px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
.ctab[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 0 0 3px #F6D98A}
.rn{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:#E24B4A;color:#fff;font-size:.7rem;line-height:18px;text-align:center}
.clist .crow,.nlist .nrow{text-align:left}
.crow .thumb{width:46px;height:46px}
.row.turn,.box.turn{border:2px solid var(--pink) !important;border-radius:12px;background:#FFF7F9}
.clist .row.turn,.nlist .row.turn{margin:4px 0}
.turn-t{display:block;color:#B2456A;font-weight:700;font-size:.78rem;margin-top:2px}
.ncat{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.ncat svg{width:19px;height:19px}
.nc-am{background:#FAEEDA;color:#854F0B}.nc-pk{background:#FBEAF0;color:#993556}.nc-bl{background:#E6F1FB;color:#185FA5}
.nc-gn{background:#EAF3DE;color:#3B6D11}.nc-gy{background:#F1EFE8;color:#5F5E5A}.nc-pu{background:#EEEDFE;color:#534AB7}

/* ---------- ホーム：種類とだれの物（2026-10-13） ---------- */
.hseg{margin:0 0 10px}
.who-row{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none}
.who-row::-webkit-scrollbar{display:none}
.wchip{flex:none;display:inline-flex;align-items:center;gap:4px;border:1.5px solid var(--tomo-line);background:#fff;color:var(--tomo-ink);border-radius:999px;padding:5px 12px;font:inherit;font-size:.82rem;cursor:pointer}
.wchip svg{width:15px;height:15px}
.wchip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:700}
.ppl{margin:6px 0 4px;border-radius:12px}
.ppl.open{background:#FBEAF0;padding:6px 8px 4px}
.ppl-t{display:flex;align-items:center;gap:4px;border:0;background:none;color:#993556;font:inherit;font-size:.8rem;font-weight:700;padding:2px 2px 4px;cursor:pointer}
.ppl-t svg{width:15px;height:15px}
.ppl-t .arrow{margin-left:2px;font-size:.7rem}

/* ---------- 子どもアカウント（2026-10-13） ---------- */
body.kid .screen{background-color:#F3FBF8;background-image:radial-gradient(#D3F0E4 1.6px,transparent 1.8px);background-size:18px 18px}
.peek-top.baby{width:46px;top:-54px}
.kid-rb{position:sticky;top:0;z-index:5;margin:0 0 12px;display:flex;align-items:center;gap:8px;background:#fff;border:2px solid #8FD9BD;border-radius:999px;padding:4px 6px 4px 8px;box-shadow:0 3px 0 #CBEFDF}
.kid-rb img{width:38px;margin:-6px 0 -2px}
.kid-rb b{font-family:var(--display);color:#2E7D63;font-size:.95rem;display:block;line-height:1.2}
.kid-rb small{display:block;color:#5E9C87;font-size:.68rem}
.kid-rb .bk{margin-left:auto;border:0;background:#FBEAF0;color:#B2456A;border-radius:999px;padding:6px 10px;font:inherit;font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap}
body.kid .appbar .whoami{border:2px solid #8FD9BD}
.who-menu{position:absolute;left:10px;top:calc(100% - 6px);z-index:30;background:#fff;border:1.5px solid var(--tomo-line);border-radius:14px;box-shadow:0 8px 24px rgba(120,60,80,.18);padding:6px;min-width:220px;display:flex;flex-direction:column;gap:2px}
.who-menu button{display:flex;align-items:center;gap:8px;border:0;background:none;font:inherit;font-size:.88rem;color:var(--tomo-ink);padding:8px 10px;border-radius:10px;text-align:left;cursor:pointer}
.who-menu button[aria-pressed="true"]{background:#FBEAF0;font-weight:700}
.who-menu button img{width:28px}
.who-menu button small{margin-left:auto;color:#5E9C87;font-size:.72rem}
.who-menu button svg{width:18px;height:18px}
.by-g{display:block;font-size:.68rem;font-weight:700;color:#2E7D63;background:#E1F5EE;border-radius:999px;padding:0 8px;margin:0 0 3px;width:max-content}
.mine-links .ml-kid .mi img{width:22px;height:auto}
.kid-row .kid-face{width:40px;flex:none}
.kid-tools{display:flex;justify-content:flex-end;padding:0 4px 8px}

/* ホームの絞り込み：白い台＋見出し＋区切り線／Myクローゼットの上のボタン：4つを横一列（2026-10-13） */
.fbox{background:#fff;border-radius:16px;padding:12px;box-shadow:0 2px 8px rgba(160,90,110,.10);margin-bottom:14px}
.fbox .hseg{margin-bottom:0}
.fbox .fl{font-size:.72rem;color:#9a7f88;font-weight:700;margin:0 0 4px 2px}
.fbox .fdiv{border-top:1px dashed #F0C9D3;margin:10px 0 8px}
.fbox .ppl{margin-bottom:0}
.mine-links{grid-template-columns:repeat(4,1fr);gap:6px}
.mine-links button{flex-direction:column;gap:3px;padding:9px 2px;font-size:.74rem}
.mine-links .mi{width:30px;height:30px}
.mine-links .ml-kid{background:#E1F5EE;color:#2E7D63}
.fbox .hseg button{position:relative}
.fbox .hseg button+button::before{content:'';position:absolute;left:-2px;top:22%;bottom:22%;width:1px;background:#E3D3D8}
.fbox .hseg button[aria-pressed="true"]::before,.fbox .hseg button[aria-pressed="true"]+button::before{display:none}
.hero img.baby{width:31%;max-width:124px}
/* 子どもの画面を見ているときの帯（上の帯のすぐ下） */
#kidband{display:flex;align-items:center;gap:8px;background:#E1F5EE;border-bottom:2px solid #8FD9BD;padding:5px 10px;font-size:.78rem;color:#2E7D63;flex:none}
#kidband[hidden]{display:none}
#kidband img{width:30px;margin:-4px 0}
#kidband .kb-t{flex:1;min-width:0;line-height:1.3}
#kidband b{font-family:var(--display);font-size:.9rem}
#kidband .bk{flex:none;border:0;background:#fff;color:#B2456A;border:1.5px solid #F4C0D1;border-radius:999px;padding:5px 10px;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap}
.whoami .now{margin-left:4px;background:#8FD9BD;color:#fff;border-radius:999px;padding:0 6px;font-size:.62rem;font-weight:700}
#kidband small{display:block;font-size:.66rem;color:#5E9C87}
/* 子どもの画面：ホームの上はキャラを右に（親は左） */
body.kid .hero{flex-direction:row-reverse}
body.kid .hero .fold{right:auto;left:8px}
body.kid .hero.small .hero-txt{padding-right:0;padding-left:44px}
body.kid .hero.small img.baby{width:34px;max-width:34px}
/* 子どものトップ：まわりに小物のあるべびクロちゃん（右）・文字の後ろを明るく（左） */
.hero img.baby{width:48%;max-width:220px;filter:none}
body.kid .hero{background:linear-gradient(270deg,rgba(255,255,255,0) 34%,rgba(255,250,248,.84) 60%,rgba(255,250,248,.92) 100%),url("bg/room.jpg") 0 calc(min(100vw,480px) * -.74)/100% auto no-repeat #F3D5BD}
.hero img.baby{width:54%;max-width:250px;margin-left:-14px}
/* 子どものトップ：べびクロZちゃんの名前 */
.hero .baby-fig{flex:none;width:54%;max-width:250px;margin:0 0 0 -14px;position:relative}
.hero .baby-fig img.baby{width:100%;max-width:none;margin:0}
.hero .baby-fig figcaption{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.92);border:1.5px solid #8FD9BD;color:#2E7D63;border-radius:999px;padding:1px 10px;font-family:var(--display);font-weight:700;font-size:.72rem}
.hero.small .baby-fig{width:40px;margin:0}
.hero.small .baby-fig figcaption{display:none}
/* べびクロZちゃんの名前は文字だけ・キャラをもっと右へ */
.hero .baby-fig{margin:0 -30px 0 -6px}
.hero .baby-fig figcaption{background:none;border:0;padding:0;bottom:2px;font-size:.68rem;color:#3E8A70;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 2px #fff}
.hero .baby-fig figcaption{bottom:14px;font-size:.58rem}
/* 保護者のOK待ち・保護者の追加 */
.gok-box .kid-face{width:46px;flex:none}
.gadd{background:#F3FBF8;border:1.5px dashed #8FD9BD;border-radius:12px;padding:10px;margin:0 4px 10px}
.gadd select{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px;font:inherit;background:#fff}
.kid-tools{flex-wrap:wrap;gap:6px}

/* ---------- 子どもの画面：ボタン・文字を子どもっぽく（B：ぷっくり＋ぬいめ＋パステル） ---------- */
body.kid .screen{font-family:"Zen Maru Gothic",var(--font,sans-serif)}
body.kid .sec-title,body.kid .mine-sec{font-family:"Zen Maru Gothic";font-weight:900;color:#2E7D63}
body.kid .btn{border-radius:999px;font-family:"Zen Maru Gothic";font-weight:900;letter-spacing:.04em;box-shadow:0 4px 0 rgba(0,0,0,.12)}
body.kid .btn.pink,body.kid .btn:not(.sub):not(.warn):not(.caution):not(.danger):not(.ghost):not(.line){background:#FF8FAB;color:#fff;box-shadow:0 4px 0 #E06B8A;outline:2px dashed rgba(255,255,255,.85);outline-offset:-6px}
body.kid .btn.sub{background:#FFF6D8;color:#8A6410;border:2px solid #F5D77A;box-shadow:0 4px 0 #F5D77A}
body.kid .btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.12)}
body.kid .fbox{border-radius:22px;border:2px solid #CBEFDF;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27%3E%3Ccircle cx=%272%27 cy=%272%27 r=%271.4%27 fill=%27%23E8F7F1%27/%3E%3C/svg%3E")}
body.kid .seg{border-radius:999px;background:#F3FBF8;border:2px solid #CBEFDF}
body.kid .seg button{border-radius:999px;font-family:"Zen Maru Gothic";font-weight:700;font-size:.9rem}
body.kid .seg button[aria-pressed="true"]{background:#4CC3A0;color:#fff;box-shadow:0 3px 0 #2E9E7E;outline:2px dashed rgba(255,255,255,.8);outline-offset:-5px}
body.kid .fbox .hseg button+button::before{display:none}
body.kid .wchip{font-family:"Zen Maru Gothic";font-weight:700;border-width:2px}
body.kid .who-row .wchip:nth-child(4n+2){background:#FFF0F4}
body.kid .who-row .wchip:nth-child(4n+3){background:#EEF6FF}
body.kid .who-row .wchip:nth-child(4n+4){background:#F3FFE9}
body.kid .wchip[aria-pressed="true"]{background:#FFB547 !important;border-color:#FFB547;color:#fff;box-shadow:0 3px 0 #E59521}
body.kid .smallbtn{border-radius:999px;font-family:"Zen Maru Gothic";font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.1)}
body.kid .ctab{font-family:"Zen Maru Gothic";border-width:2px}
body.kid .ctab[aria-pressed="true"]{background:#4CC3A0;border-color:#4CC3A0;box-shadow:0 3px 0 #2E9E7E}
body.kid .mine-tiles .tile{border-radius:18px;font-family:"Zen Maru Gothic"}
body.kid .mine-links button{border-radius:18px;font-family:"Zen Maru Gothic";box-shadow:0 3px 0 rgba(0,0,0,.08)}
body.kid .decide-btn{background:#FF8FAB;box-shadow:0 3px 0 #E06B8A;font-family:"Zen Maru Gothic"}
body.kid .box,body.kid .mbox{border-radius:20px}
body.kid input,body.kid textarea,body.kid select{border-radius:14px}
.pub.wait{color:#B07A12;background:#FFF3CC;border-radius:999px;padding:1px 8px;font-weight:700;display:inline-block;margin-top:2px}
/* Myクローゼットの箱：品名の列がはみ出さないように（少し広い画面でも、キャラのひとことは下の段へ） */
.mbox .mhead .grow{min-width:0}
@media (max-width:640px){
  .mbox .mhead{flex-wrap:wrap}
  .mbox .mhead .mini-talk{order:5;width:100%;justify-content:flex-end;margin-top:4px}
  .mbox .mhead .mini-talk span{flex:0 1 auto}
}
/* 「ページを見る」：のぞいているキャラのアイコン */
.pagebtn .pg-ic{width:34px;height:auto;margin:-4px 0 0}
body.kid .pagebtn{border-radius:16px;border:2px solid #9FB6E8;box-shadow:0 3px 0 #C5D3F0;font-family:"Zen Maru Gothic"}
/* Myクローゼットの箱：画面の広さに関係なく、キャラのひとことは下の段（右寄せ）。品名の列を広く使う */
.mbox .mhead{flex-wrap:wrap}
.mbox .mhead .mini-talk{order:5;width:100%;justify-content:flex-end;margin-top:4px}
.mbox .mhead .mini-talk span{flex:0 1 auto}
/* 子どもの画面：掲載の下のボタン（なおす・LINEでおしえる・のばす・やめる）をぷっくり大きく */
body.kid .tools{gap:6px;border-top:2px dashed #CBEFDF;padding-top:10px}
body.kid .tools button{font-family:"Zen Maru Gothic";font-weight:700;font-size:.74rem;color:#5B4636;white-space:normal;line-height:1.25;text-align:center}
body.kid .tools button + button::before{display:none}
body.kid .tools .ic{width:46px;height:46px;border:2px dashed rgba(255,255,255,.9);box-shadow:0 3px 0 rgba(0,0,0,.12)}
body.kid .tools svg{width:22px;height:22px}
body.kid .tools .t-e .ic{background:#BFD4FF;color:#2F55A8}
body.kid .tools .t-x .ic{background:#A8E6CF;color:#1F7A5C}
body.kid .tools .t-d .ic{background:#FFC2CF;color:#B2456A}
body.kid .tools .t-d{color:#B2456A}
/* 子どもの画面：Myクローゼットの箱（C-1） */
.kbox .kmh{display:flex;gap:10px;align-items:center}
.kbox .kmh .thumb{width:64px;height:64px;border-radius:14px;flex:none;object-fit:cover}
.kbox .kmh .grow{flex:1;min-width:0}
.kbox .kmh b{display:block;font-size:1.05rem;font-family:"Zen Maru Gothic";font-weight:900}
.kbox .kside{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex:none}
.kchip{background:#fff;border:2px solid #CBEFDF;border-radius:999px;padding:2px 10px;font-family:"Zen Maru Gothic";font-weight:700;font-size:.76rem;color:#2E7D63;text-align:center;line-height:1.2}
.kchip small{display:block;font-size:.62rem;font-weight:500;color:#6B8F82}
.kchip.fav{border-color:#F4C0D1;color:#B2456A}
.kbar{display:flex;align-items:center;gap:8px;margin:10px 0 4px;background:#fff;border:2px dashed #CBEFDF;border-radius:16px;padding:6px 8px 6px 4px}
.kbar.wait{background:#FFF6D8;border-color:#F5D77A}
.kbar img{width:44px;margin:-8px 0 -4px;flex:none}
.kbar .kb-tx{flex:1;min-width:0}
.kbar .t1{font-family:"Zen Maru Gothic";font-weight:900;color:#2E7D63;font-size:.84rem;line-height:1.3}
.kbar.wait .t1{color:#9A6512}
.kbar .t2{font-size:.7rem;color:#6B7F78;line-height:1.3}
.kbar .kpg{flex:none;border:2px solid #9FB6E8;background:#fff;color:#2F55A8;border-radius:999px;padding:5px 10px;font-family:"Zen Maru Gothic";font-weight:700;font-size:.72rem;white-space:nowrap;box-shadow:0 2px 0 #C5D3F0;cursor:pointer}
/* 親の画面のMyクローゼットの箱（子どもと同じ並び・ピンク系） */
body:not(.kid) .kbox .kmh b{font-family:inherit;font-weight:700}
body:not(.kid) .kbar{border-style:solid;border-color:#F5C9D2}
body:not(.kid) .kbar .t1{color:#B2456A;font-family:var(--display)}
body:not(.kid) .kbar.wait .t1{color:#9A6512}
body:not(.kid) .kchip{border-color:#F5C9D2;color:#7A4452;font-family:inherit}
body:not(.kid) .kchip small{color:#9a7f88}
/* 友達の画面：運営（ともクロZちゃん）と友だちの欄に色 */
.off-list{background:#FDEEF0;border:1.5px solid #F5C9D2}
.off-list .row{background:transparent}
.fr-list{background:transparent;border:0;box-shadow:none;display:flex;flex-direction:column;gap:8px}
.fr-list > .row{border:1.5px solid #CFE0F7;background:#EEF4FD;border-radius:14px}
.fr-list > .row:nth-child(3n+2){background:#FFF6D8;border-color:#F5D77A}
.fr-list > .row:nth-child(3n+3){background:#EAF7F1;border-color:#BFE6D5}
body.kid .off-list{border:2px dashed #F5C9D2;border-radius:18px}
body.kid .fr-list > .row{border-width:2px;border-style:dashed;border-radius:18px}
/* グループ選び（友だちになったとき・必ず） */
.gs-row{flex-wrap:wrap;overflow:visible;margin:10px 0}
.gs-new{display:flex;gap:6px;margin-top:6px}
.gs-new input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:16px;background:#fff}
.btn:disabled{opacity:.5;cursor:default}
/* はじめの画面：上の文字と、ともクロZちゃんの吹き出し */
.login-title{display:block;font-family:"Zen Maru Gothic";font-weight:900;color:#2F4A7A;font-size:.78em;line-height:1.25}
.login .splash .splash-say{position:absolute;left:50%;transform:translateX(-58%);top:calc(min(100vw,480px) * .66 - 64px);z-index:3;background:#fff;border:2px solid #F5C9D2;border-radius:18px;padding:8px 14px;font-family:"Zen Maru Gothic";font-weight:700;font-size:15px;color:#7A4452;line-height:1.45;box-shadow:0 3px 0 #F5C9D2;white-space:nowrap;text-align:center}
.login .splash .splash-say::after{content:"";position:absolute;left:60%;bottom:-11px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:11px solid #F5C9D2}
.chan-seg{margin:0 0 10px}
/* おうちの人からの連絡 */
.fam-link{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;background:#FFF6D8;border:2px dashed #F5D77A;border-radius:18px;padding:8px 12px;font:inherit;text-align:left;cursor:pointer;box-shadow:0 3px 0 #F5D77A}
.fam-link img{width:40px;flex:none}
.fam-link b{display:block;font-family:"Zen Maru Gothic";font-weight:900;color:#9A6512}
.fam-link small{display:block;font-size:.72rem;color:#8A7A55}
.fam-link .arrow{color:#C9A23A;font-size:1.2rem}
.msg.auto{background:#FFF6D8 !important;color:#6B5413 !important;border:1.5px solid #F5D77A}
/* 女の子＝ピンク、男の子＝水色（親の画面） */
.fam-link.g-girl{background:#FFEAF1;border-color:#F4A6BF;box-shadow:0 3px 0 #F4A6BF}
.fam-link.g-girl b{color:#B2456A}.fam-link.g-girl .arrow{color:#F4A6BF}
.fam-link.g-boy{background:#E6F1FB;border-color:#85B7EB;box-shadow:0 3px 0 #85B7EB}
.fam-link.g-boy b{color:#185FA5}.fam-link.g-boy .arrow{color:#85B7EB}
.kid-row.g-girl{background:#FFEAF1;border-left:5px solid #F4A6BF;border-radius:0}
.kid-row.g-boy{background:#E6F1FB;border-left:5px solid #85B7EB;border-radius:0}
.who-menu button.g-girl{color:#B2456A}.who-menu button.g-boy{color:#185FA5}
.who-menu button.g-girl[aria-pressed="true"]{background:#FFEAF1}.who-menu button.g-boy[aria-pressed="true"]{background:#E6F1FB}
#kidband.g-girl{background:#FFEAF1;border-bottom-color:#F4A6BF;color:#B2456A}
#kidband.g-boy{background:#E6F1FB;border-bottom-color:#85B7EB;color:#185FA5}
#kidband.g-girl small{color:#C26A88}#kidband.g-boy small{color:#4F84BF}
.gender-seg button[data-v="girl"][aria-pressed="true"]{background:#F4A6BF;color:#fff}
.gender-seg button[data-v="boy"][aria-pressed="true"]{background:#85B7EB;color:#fff}
/* 女の子・男の子のボタン：最初から色付き＋間に区切り線 */
.gender-seg{gap:0;padding:4px}
.gender-seg button{font-weight:700;border-radius:8px}
.gender-seg button[data-v="girl"]{background:#FFEAF1;color:#B2456A}
.gender-seg button[data-v="boy"]{background:#E6F1FB;color:#185FA5;border-left:2px solid #fff;position:relative}
.gender-seg button[data-v="boy"]::before{content:"";position:absolute;left:-2px;top:20%;bottom:20%;border-left:1.5px solid #C9C3D3}
.gender-seg button[data-v="girl"][aria-pressed="true"]{background:#F4A6BF;color:#fff}
.gender-seg button[data-v="boy"][aria-pressed="true"]{background:#85B7EB;color:#fff}
/* 交換の申し込みの写真を大きめに＋押すと画面いっぱいに */
.offer-pics img{width:96px;height:96px;border-radius:12px}
#lightbox{position:fixed;inset:0;z-index:100;background:rgba(20,16,20,.88);display:flex;align-items:center;justify-content:center;padding:16px}
#lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#lightbox button{position:absolute;border:0;background:rgba(255,255,255,.9);color:#5B4636;border-radius:50%;width:44px;height:44px;font-size:1.6rem;line-height:1;cursor:pointer}
#lightbox .lb-x{top:14px;right:14px}
#lightbox .lb-p{left:10px;top:50%;transform:translateY(-50%)}
#lightbox .lb-n{right:10px;top:50%;transform:translateY(-50%)}
#lightbox .lb-c{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:.85rem;background:rgba(0,0,0,.4);border-radius:999px;padding:2px 10px}
/* 保護者：子どものことでOKが必要なもの（「〇〇さんとの連絡」のすぐ下） */
.ok-link{display:flex;align-items:center;gap:8px;width:calc(100% - 16px);margin:-6px 8px 12px;background:#fff;border:2px solid var(--pink);border-top:0;border-radius:0 0 14px 14px;padding:8px 12px;font:inherit;font-size:.82rem;font-weight:700;color:#B2456A;text-align:left;cursor:pointer}
.ok-link.g-boy{border-color:#85B7EB;color:#185FA5}
.ok-link.g-girl{border-color:#F4A6BF}
.ok-link .arrow{margin-left:auto}
.whoami .adm{margin-left:4px;background:#2F4A7A;color:#fff;border-radius:999px;padding:0 7px;font-size:.62rem;font-weight:700}
.report-link{display:flex;align-items:center;justify-content:center;gap:4px;margin:22px auto 4px;border:0;background:none;color:#9a8f95;font:inherit;font-size:.74rem;text-decoration:underline;cursor:pointer}.report-link svg{width:14px;height:14px}
.member-no{font-size:.82rem;color:#7A4452}.member-no b{font-family:ui-monospace,Consolas,monospace;font-size:.95rem;color:#2F4A7A;letter-spacing:.04em}
/* 設定：パスワードの変更は、押すと開く */
.pass-box{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.pass-box summary{cursor:pointer;font-weight:700;font-size:.9rem;list-style:none;display:flex;align-items:center;justify-content:space-between}
.pass-box summary::-webkit-details-marker{display:none}
.pass-box summary::after{content:"▾";color:#9a8f95}
.pass-box[open] summary::after{content:"▴"}
.ok-box{display:flex;align-items:center;gap:6px;background:#EAF3DE;color:#27500A;border-radius:10px}
.ok-box svg{width:18px;height:18px;flex:none}
/* 保護者：子どもの友だち */
.kid-fr{margin:0 4px 10px}
.kid-fr-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kid-fr-list .kf{border-radius:999px;padding:3px 10px;font-size:.82rem;background:#F3FBF8;border:1.5px solid #CBEFDF;color:#2E7D63}
.kid-fr-list .kf.g-girl{background:#FFEAF1;border-color:#F4A6BF;color:#B2456A}
.kid-fr-list .kf.g-boy{background:#E6F1FB;border-color:#85B7EB;color:#185FA5}
/* プロフィールの画像（ない人は名前の頭文字の丸） */
.avatar.has-img{background-size:cover !important;background-position:center !important;color:transparent !important;font-size:0 !important}
.av-set{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.av-set .avatar.big{width:64px;height:64px;font-size:1.6rem;flex:none}
.av-set b{display:block}.av-set small{display:block;font-size:.76rem;color:var(--muted)}
.btn .btn-sub{display:block;font-size:.72rem;font-weight:500;opacity:.8;margin-top:1px}
.admin-go{display:flex;align-items:center;gap:10px;margin:-6px 0 14px;background:#2F4A7A;color:#fff;border-radius:14px;padding:10px 14px;text-decoration:none;font-size:.9rem}.admin-go .mi{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}.admin-go svg{width:16px;height:16px}.admin-go b{flex:1}
.name-set{margin-bottom:10px}.name-set label b{display:block}.name-set label small{display:block;font-size:.76rem;color:var(--muted);margin-bottom:6px}.name-set input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;font-size:16px;background:#fff}
/* 友達：自分のIDとID検索 */
.idbox{margin-bottom:14px}
.id-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.id-l{font-size:.8rem;color:var(--muted)}
.id-v{font-family:ui-monospace,Consolas,monospace;font-size:1.1rem;letter-spacing:.06em;color:#2F4A7A;margin-right:auto}
.smallbtn.line-s{background:#06C755;color:#fff;border-color:#06C755}
.id-search{display:flex;gap:6px;margin-top:10px}
.id-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;font-size:16px;background:#fff}
.id-hit{margin-top:8px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px}
/* ID検索：入力欄が押しつぶされないように（ボタンは右に小さく） */
.id-search{flex-wrap:nowrap}
.id-search input{flex:1 1 auto !important;width:auto !important;min-width:0}
.id-search .btn{flex:0 0 auto !important;width:auto !important;padding:9px 18px !important;margin:0 !important}
/* 友だちの名前 → その人のクローゼット */
.fr-name{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.fr-name .fr-go{color:var(--pink);font-weight:700}
.person-top{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px;margin-bottom:14px;box-shadow:0 2px 8px rgba(160,90,110,.08)}
.person-top .avatar.big{width:56px;height:56px;font-size:1.4rem;flex:none}
.person-top b{display:block;font-family:var(--display);font-size:1.05rem}.person-top small{color:var(--muted);font-size:.8rem}
.adm-fr summary .adm{margin-left:6px;background:#2F4A7A;color:#fff;border-radius:999px;padding:0 7px;font-size:.62rem;font-weight:700}
/* ホームの「だれの物」：横にずらすのではなく、折り返して全部見えるように（パソコンのマウスでも選べる） */
.fbox .who-row{flex-wrap:wrap;overflow:visible}
/* 取り消しのお願い中の赤い帯 */
.cancel-band{display:flex;align-items:center;gap:8px;margin:8px 0;background:#FCEBEB;border:2px solid #E24B4A;border-radius:12px;padding:8px 10px;color:#A32D2D}
.cancel-band svg{width:22px;height:22px;flex:none}
.cancel-band b{display:block;font-size:.92rem}
.cancel-band small{display:block;font-size:.74rem;color:#7A3A3A;line-height:1.4}
.cancel-band.their{background:#FFF0F0;box-shadow:0 0 0 3px #F6D98A}
.pill.r{background:#FCEBEB;color:#A32D2D;font-weight:700}
/* お知らせ B案：区分・太枠・札 */
.nsec{display:flex;align-items:center;gap:6px;margin:14px 2px 6px;font-weight:700;font-size:.92rem}
.nsec .n{display:inline-block;min-width:22px;padding:0 6px;border-radius:999px;color:#fff;font-size:.8rem;text-align:center;line-height:22px}
.nsec.act{color:#A32D2D}.nsec.act .n{background:#E24B4A}
.nsec.new{color:#B2456A}.nsec.new .n{background:#E3809A}
.nsec.read{color:#8a8287;font-weight:500}
.nlist .row.n-act{border:2.5px solid #E24B4A !important;background:#FFF3F3 !important;border-radius:12px}
.nlist .row.n-new{border:2.5px solid #E3809A !important;background:#FFF5F8 !important;border-radius:12px}
.nlist .row.n-new b,.nlist .row.n-act b{font-weight:900}
.nlist .row.n-read b{font-weight:400;color:#5c5358}
.nlist .row.n-read{opacity:.92}
.nlist{display:flex;flex-direction:column;gap:6px;background:transparent;border:0;box-shadow:none}
.ntag{display:inline-block;margin-left:6px;border-radius:999px;padding:0 7px;font-size:.66rem;font-weight:700;vertical-align:2px}
.ntag.act{background:#E24B4A;color:#fff}.ntag.new{background:#FAEEDA;color:#633806}
.ngo{flex:none;background:#E24B4A;color:#fff;border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:700}
/* 下のメニューの数字：アイコンはそのまま、数字だけ大きく目立たせる */
.nav .navi .badge{top:-8px;right:-14px;min-width:24px;height:24px;line-height:20px;font-size:.82rem;padding:0 6px;background:#E24B4A;border:2px solid #fff;box-shadow:0 2px 4px rgba(160,40,60,.35)}

/* 047 関係「その他」・会ったことはある？・取引する前に */
.met-box{margin-top:12px;background:var(--surface);border:1px solid var(--tomo-line);border-radius:14px;padding:12px}
.met-q{margin:0 0 8px;font-weight:700}
.met-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;font:inherit;font-size:.9rem;color:var(--ink);cursor:pointer}
.met-opt .met-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:none}
.met-opt[aria-pressed="true"]{border-color:var(--pink);background:var(--tomo-bg)}
.met-opt[aria-pressed="true"] .met-dot{border:5px solid var(--pink)}
.met-now{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--muted);margin-left:2px}
.met-now .linkbtn{border:0;background:none;color:var(--pink);font:inherit;font-weight:700;text-decoration:underline;padding:0;cursor:pointer}
.caution-page{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:6px}
.caution-page.strong{border:2px solid #D85A30}
.caution-page h2{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:1.1rem}
.caution-page.strong h2{color:#993C1D}
.caution-page h2 svg{width:22px;height:22px}
.cp-lead{margin:0 0 12px;color:var(--muted);font-size:.9rem}
.cp-list{list-style:none;margin:0 0 12px;padding:0}
.cp-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px dashed var(--line);font-size:.92rem}
.cp-list li:first-child{border-top:0}
.cp-list svg{width:20px;height:20px;flex:none;margin-top:1px}
.caution-page.strong .cp-list svg{color:#993C1D}
.cp-check{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;font-weight:700}
.cp-check input{width:20px;height:20px;accent-color:var(--pink)}
.caution-page .btn{margin-top:8px}

/* 048 運営の要確認（Myクローゼットのいちばん上） */
.needs-box{background:#fff;border:2px solid #E24B4A;border-radius:14px;padding:10px 12px;margin-bottom:12px}
.nb-t{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-weight:700;color:#A32D2D}.nb-t svg{width:20px;height:20px}
.nb-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.nb-row b{flex:1;min-width:0}.nb-row .arrow{color:var(--muted)}
.nb-cnt{min-width:64px;text-align:center;border-radius:999px;padding:2px 8px;font-size:.75rem;font-weight:700;background:#FAEEDA;color:#854F0B}.nb-cnt.r{background:#FCEBEB;color:#A32D2D}
.nb-note{margin:6px 0 0;font-size:.72rem;color:var(--muted)}

/* ロボット対策の確認欄（必要なときだけ出る） */
.ts-box{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:9999}

/* スマホの細い幅では、吹き出しの箇条書きを折り返す（はみ出し防止） */
@media (max-width:430px){.talk li{white-space:normal}}

/* 商品の写真は切り取らずに全部見せる（枠の大きさはそのまま。余ったところは薄い色） */
.card .img img,.gallery img,.gal-thumbs img,.photos .ph img,.row .thumb,.offer-pics img,.trade-pair img,.kbox .kmh .thumb{object-fit:contain;background:#FBF7F4}

/* 中高生の登録・保護者になる（054） */
.gate-t{font-family:var(--display);font-weight:900;color:var(--tomo-ink);text-align:center;font-size:1.2rem;margin:6px 0 10px}

/* 登録の画面のいちばん上の切り替え */
.reg-seg{display:flex;border:2px solid var(--tomo-line);border-radius:14px;overflow:hidden;margin:0 0 4px}
.reg-seg button{flex:1;border:0;background:#fff;padding:11px 4px;font:inherit;font-weight:700;font-size:.9rem;color:var(--muted);white-space:nowrap;cursor:pointer}
.reg-seg button[aria-pressed="true"]{background:var(--pink);color:#fff}

/* 保護者を追加（055） */
.gadd-t{margin:0 0 6px;font-weight:700;color:var(--tomo-ink)}
.gadd-opt{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 10px;margin:6px 0}
.gadd-opt b{display:block;font-size:.88rem}.gadd-opt small{display:block;color:var(--muted);font-size:.76rem;margin:2px 0 6px}

/* 子どもからの招待（056） */
.choice-box{background:#fff;border:2px solid var(--tomo-line);border-radius:14px;padding:10px 12px;margin:8px 0}
.choice-box b{display:block;color:var(--tomo-ink)}.choice-box small{display:block;color:var(--muted);font-size:.78rem;margin:2px 0 4px}
.guide-pts p{margin:0;padding:7px 0;border-top:1px dashed var(--line)}.guide-pts p:first-child{border-top:0}
.kinv-chk{border:2px solid var(--pink);border-radius:12px;padding:9px 10px;background:#fff}

/* 子どもの行：学年・ルール・保護者を1行ずつ */
.kid-row .grow > .who{display:block}

/* 問い合わせの返事の画像（058） */
.cimg{display:flex;margin:6px 0}.cimg.me{justify-content:flex-end}
.cimg img{max-width:72%;max-height:420px;border-radius:14px;border:1px solid var(--line);background:#fff;object-fit:contain;cursor:zoom-in}
/* いちばん下のボタンが、下のメニューに隠れないように */
.screen{padding-bottom:40px}
/* 掲載の「あとで続ける」「やめる」：狭い画面でも文字が切れない */
.draft-acts .btn{white-space:normal;line-height:1.25;padding-left:8px;padding-right:8px;font-size:.92rem}
.draft-acts .nw{white-space:nowrap}
/* 友だちをやめた人（友達の画面のいちばん下・小さく） */
.unf-box{margin-top:18px;font-size:.85rem;color:var(--muted)}
.unf-box summary{cursor:pointer;padding:6px 2px}
.unf-box .row .smallbtn{white-space:nowrap}
/* 退会 */
.wd-link{display:block;margin:22px auto 4px;background:none;border:0;color:#9A9298;font:inherit;font-size:.8rem;text-decoration:underline;cursor:pointer}
.wd-link.sm{display:inline-block;margin:6px 0 0;font-size:.74rem}
.wd-link-note{text-align:center;color:#9A9298;font-size:.8rem;margin:22px 0 4px}
.wd-box{margin-bottom:12px}
.wd-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:.85rem}
.wd-table th{text-align:left;font-weight:700;padding:7px 8px 7px 0;width:9.5em;vertical-align:top;color:var(--ink);border-top:1px dashed var(--line)}
.wd-table td{padding:7px 0;color:var(--muted);border-top:1px dashed var(--line)}
.wd-warn{background:#FDECEC;border:2px solid #D9534F;color:#8E2420;border-radius:12px;padding:10px 12px;margin:10px 0;font-size:.88rem;line-height:1.6}
.wd-btn{width:100%;margin-top:6px}
.wd-btn.armed{background:#D9534F;border-color:#D9534F;color:#fff}
/* グループを作る：点線のピンクのボタン（グループが並ぶところ全部） */
.gnew-chip{border:2px dashed #E3809A;background:#FFF0F5;color:#B0506A;border-radius:999px;padding:5px 12px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.gnew-chip.big{display:block;width:100%;padding:10px;margin:4px 0 10px;font-size:.92rem}
.gnew-form{display:flex;gap:6px;align-items:center;margin:8px 0 10px}
.gnew-form input{flex:1;min-width:0;border:2px solid #E3809A;border-radius:10px;padding:9px;font:inherit;font-size:16px;background:#fff}
.gnew-form .btn{flex:none;width:auto;padding:9px 16px;margin:0}
.gnew-form .smallbtn{flex:none}
/* 保護者：子どもの画面への切りかえ（名前の札） */
.appbar .whoami.sw{background:#E3809A;color:#fff;border:0;padding:3px 10px 3px 3px;box-shadow:0 2px 6px rgba(200,80,110,.35)}
.appbar .whoami.sw b{color:#fff}
.appbar .whoami.sw .avatar.xs{background:#fff;color:#B0506A}
.whoami .sw-l{margin-left:4px;font-weight:700;font-size:.68rem;background:rgba(255,255,255,.25);border-radius:999px;padding:1px 7px;white-space:nowrap}
.appbar.bar-mine .whoami.sw{background:#E3809A;padding:2px 8px 2px 2px;text-shadow:none}
.sw-tip{position:absolute;left:10px;top:calc(100% + 8px);z-index:30;max-width:230px;text-align:left;background:#fff;border:2px solid #E3809A;border-radius:12px;padding:8px 26px 8px 10px;font:inherit;font-size:.78rem;font-weight:700;color:#8E2F4E;line-height:1.5;box-shadow:0 4px 12px rgba(200,80,110,.25);cursor:pointer}
.sw-tip::before{content:"";position:absolute;top:-9px;left:24px;border:8px solid transparent;border-top:0;border-bottom-color:#E3809A}
.sw-tip .x{position:absolute;right:8px;top:6px;font-size:.75rem;color:#B0506A}
/* ホーム：お子さんの画面 */
.kidsw{background:#FFF0F5;border:2px solid #EE9DB5;border-radius:16px;padding:10px 10px 4px;margin-bottom:12px}
.kidsw-t{margin:0 0 8px 4px;font-size:.85rem;font-weight:700;color:#8E2F4E}
.kidsw-b{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border:2px solid #E3809A;border-radius:14px;padding:8px 12px;margin-bottom:6px;font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.kidsw-b img{width:34px;height:34px;object-fit:contain}
.kidsw-b b{font-size:.95rem}
.kidsw-b small{color:#888;font-size:.72rem}
.kidsw-b .arrow{color:#E3809A;font-weight:700}
.kidsw-b.g-boy{border-color:#7FA8E0}
/* 友達の画面：おうちの人どうしが友だちの子 */
.sug-box{margin-bottom:14px;border:2px solid #EE9DB5;background:#FFF4F7;padding:0;overflow:hidden}
.sug-head{display:flex;align-items:center;gap:8px;width:100%;background:#F7C3D3;border:0;padding:12px 14px;font:inherit;font-weight:700;color:#8E2F4E;cursor:pointer;text-align:left}
.sug-head .rn{background:#D9466F;color:#fff;border-radius:999px;min-width:24px;height:24px;display:inline-grid;place-items:center;font-size:.82rem;padding:0 7px}
.sug-head .arrow{font-size:.75rem;color:#8E2F4E}
.sug-box>.hint,.sug-box>.list{margin-left:12px!important;margin-right:12px!important}
.sug-box>.hint:last-child{margin-bottom:12px!important}
.sug-box .list{background:transparent}
.sug-row{align-items:center;flex-wrap:wrap;background:#fff;border:1.5px solid #F4B6C8;border-radius:14px;margin-bottom:8px}
.sug-row .avatar{background:#FCE3EA;color:#B0506A}
.sug-btns{display:flex;gap:6px;width:100%;margin-top:8px}
.sug-btns .smallbtn{flex:1;justify-content:center;text-align:center}
.sug-btns .sug-yes{background:#E3809A;border-color:#E3809A;color:#fff;font-weight:700}
/* 友達の画面：検索ID（青）とログインID（オレンジ） */
.id-panel{border-radius:12px;padding:10px 12px;margin-bottom:10px}
.id-search-p{background:#EAF2FF;border:1.5px solid #A9C6F2}
.id-login-p{background:#FFF3E2;border:1.5px solid #F2C68A}
.id-panel .id-l{font-weight:700;font-size:.78rem;border-radius:999px;padding:3px 10px;color:#fff}
.id-search-p .id-l{background:#4F7FCF}
.id-login-p .id-l{background:#D98A2B}
.id-search-p .id-v{color:#24508F}
.id-login-p .id-v{color:#8A4E0E}
.id-note{font-size:.76rem;color:#4E6A94;margin:6px 0 0;line-height:1.5}
.id-note.warn{color:#B04A1E}
/* 子どもの画面：ログインIDと検索IDを1行ずつ（途中で折り返さない） */
.kid-ids{display:flex;flex-direction:column}
.kid-ids>span{white-space:nowrap}
.kid-ids>span{display:block}
.kid-row .grow .kid-ids b{display:inline;font-size:inherit;color:var(--ink,inherit);font-weight:600;font-family:ui-monospace,Menlo,monospace;letter-spacing:.02em}