/* いつメン相関図（部屋の種類 itsumen）。テーマ色は1色 --itm #2ec4b6（上の文字は --ink #15171c で 8.27:1）
   白地の上に色つきの文字を置くときは --itm-ink #177167（白に 5.84:1）。ボタンはどれも 44px 以上。320px の幅でも横にはみ出さない */
:root { --itm: #2ec4b6; --itm-ink: #177167; --itm-t: #e3f6f4; }

.itm-btn { background: var(--itm); color: var(--ink); }
.btn.small.itm-btn { color: var(--ink); }
.itm-eb { color: var(--itm-ink); }
.itm-head h1 { font-size: clamp(23px, 6.4vw, 29px); }
.itm-h3 { font-size: 16px; }
.itm-box { background: #fff; border: 1.5px solid color-mix(in srgb, var(--itm) 45%, #fff); border-radius: 18px; padding: 16px; }
.itm-box .field input:focus, .itm-make .field input:focus { border-color: var(--itm-ink); }
.itm-warn { color: var(--ink); font-weight: 700; }

/* 参加・答えた人数（数字が主役） */
.itm-count { margin-top: 14px; background: var(--itm); color: var(--ink); border-radius: 20px; padding: 14px 18px 16px; display: grid; gap: 8px; }
.itm-count-num { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-round); font-weight: 700; }
.itm-count-num span { font-size: 15px; }
.itm-count-num b { font-size: 56px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.itm-count-num small { font-size: 18px; }
.itm-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.itm-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(21, 23, 28, .45); }
.itm-dots i.on { background: var(--ink); border-color: var(--ink); }

/* メンバーの一覧 */
.itm-member-box { margin-top: 16px; display: grid; gap: 8px; }
.itm-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.itm-members li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px 8px 14px; min-height: 48px; }
.itm-mname { font-family: var(--f-round); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.itm-members li small { font-size: 12px; font-weight: 700; color: var(--itm-ink); background: var(--itm-t); border-radius: 999px; padding: 1px 9px; }
.itm-members li .itm-mini-btn { margin-left: auto; }
.itm-members li .itm-confirm { flex-basis: 100%; }
.itm-mini-btn { min-height: 44px; min-width: 64px; padding: 0 14px; border: 1.5px solid #f1c5cf; border-radius: 10px; background: #fff; color: var(--danger); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.itm-confirm { gap: 10px; padding: 14px; }
.itm-confirm p { font-size: 14.5px; }
.itm-start { display: grid; gap: 10px; margin-top: 14px; }

/* 人数を変える・自分用のリンク・ほかの人の呼び名を隠す（開いて使うもの） */
.itm-size, .itm-key, .itm-hide-others { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.itm-size > summary, .itm-key > summary, .itm-hide-others > summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; font-size: 14.5px; cursor: pointer; list-style-position: inside; }
.itm-size[open], .itm-key[open], .itm-hide-others[open] { padding-bottom: 14px; display: grid; gap: 10px; }
.itm-size-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.itm-size-row select { min-height: 44px; font: inherit; font-size: 16px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.itm-size-row .btn { width: auto; padding: 0 16px; }
.itm-tools .itm-key, .itm-tools .itm-hide-others { margin-top: 0; }
.itm-tools .linklike { min-height: 44px; }

/* 招待 */
.itm-invite { gap: 10px; }
.itm-invite > h2 { font-size: 19px; }
/* 共通部品の小さなボタン（リンクの「コピー」・画像の形の切りかえ）も、この機能の画面では 44px にする */
.itm-invite .share-url, .itm-key .share-url { padding: 4px 4px 4px 12px; }
.itm-invite .share-url button, .itm-key .share-url button { min-height: 44px; padding: 0 16px; }
.itm-img .seg button { min-height: 44px; padding: 0 14px; }

/* 役割のボタン（予想・仕上げ） */
.itm-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.itm-pick { min-height: 48px; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 10px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, border-color .12s; overflow-wrap: anywhere; }
.itm-pick[aria-pressed="true"] { background: var(--itm); border-color: var(--itm-ink); color: var(--ink); }
.itm-guess > h2 { font-size: 18px; }
.itm-guess-line { margin-top: 16px; font-size: 15px; }
.itm-guess-line b { font-family: var(--f-round); color: var(--itm-ink); }

/* 答える前の説明 */
.itm-sees { background: var(--itm-t); border-radius: 16px; padding: 14px 16px; gap: 8px; }
.itm-sees h2 { font-size: 16px; }
.itm-sees ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14px; color: var(--ink2); }

/* 10問 */
.itm-progress { margin-top: 16px; }
.itm-progress .bar i { background: var(--itm); }
.itm-q { padding: 12px 0 8px; display: grid; gap: 12px; }
.itm-qtext { font-size: clamp(20px, 5.6vw, 25px); }
.itm-who { color: var(--itm-ink); }
.itm-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.itm-name-btn { min-height: 52px; font-size: 16px; }
.itm-pass { min-height: 44px; border: 1.5px dashed #c9c9c2; background: none; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.itm-pass[aria-pressed="true"] { border-style: solid; border-color: var(--ink); color: var(--ink); background: #fff; }
.itm-pass[disabled] { opacity: .45; cursor: default; }
.itm-qnav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.itm-qnav .linklike { min-height: 44px; font-weight: 700; }

/* あなたから見たグループ（本人の画面だけ） */
.itm-mine { margin-top: 16px; gap: 10px; }
.itm-mine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.itm-mine-list li { display: grid; grid-template-columns: minmax(0, 5.5em) minmax(0, 1fr); gap: 10px; font-size: 14.5px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.itm-mine-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.itm-mine-list b { font-family: var(--f-round); overflow-wrap: anywhere; }

.itm-flow { display: grid; gap: 12px; margin-top: 8px; }
.itm-flow .itm-mine { margin-top: 0; }

/* 発表を待つ */
.itm-reveal { gap: 10px; }
.itm-reveal > h2 { font-size: 19px; }

/* 結果: あなたのカード */
.itm-card { --tc: var(--itm); margin-top: 14px; }
.itm-role-big { font: 800 clamp(30px, 9vw, 40px)/1.2 var(--f-round); margin-top: 2px; }
.itm-tagline { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 14.5px; margin-top: 6px; }
.itm-tagline span { font-size: 12.5px; font-weight: 700; border: 1.5px solid rgba(21, 23, 28, .55); border-radius: 999px; padding: 0 9px; }
.itm-face { display: flex; align-items: flex-end; gap: 4px 14px; flex-wrap: wrap; margin-top: 14px; border-top: 1.5px solid rgba(21, 23, 28, .25); padding-top: 10px; }
.itm-face .itm-face-k { flex-basis: 100%; font-size: 14px; font-weight: 700; }
.itm-face .num { font-size: clamp(76px, 22vw, 104px); }
.itm-face .label { margin: 0 0 12px; }
.itm-facts { margin-top: 12px; }
.itm-facts .fact small, .section .fact small { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }

/* 相関図 */
.itm-diagram { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px; }
.itm-svg { display: block; width: 100%; height: auto; max-width: 480px; margin: 0 auto; }
.itm-svg line { stroke-linecap: round; }
.itm-svg line.sp { stroke: var(--itm-ink); stroke-width: 3.2; }
.itm-svg line.nm { stroke: #80868f; stroke-width: 2.2; stroke-dasharray: 6 6; }
.itm-svg .nodes circle { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.itm-svg .nodes circle.me { fill: var(--itm-t); stroke: var(--itm-ink); stroke-width: 4.5; }
.itm-svg .nm-t { font-weight: 800; fill: var(--ink); font-family: var(--f-body); }
.itm-svg .rl-t { font-weight: 600; fill: var(--ink2); font-family: var(--f-body); }
.itm-svg .labels rect, .itm-svg .labels circle { fill: #fff; stroke-width: 1.4; }
.itm-svg .labels rect.sp, .itm-svg .labels circle.sp { stroke: var(--itm-ink); }
.itm-svg .labels rect.nm, .itm-svg .labels circle.nm { stroke: #80868f; }
.itm-svg .labels text { font-weight: 700; stroke: none; font-family: var(--f-body); }
.itm-svg .labels text.sp { fill: var(--itm-ink); }
.itm-svg .labels text.nm { fill: var(--ink2); }
.itm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink2); }
.itm-legend i { display: inline-block; width: 26px; height: 0; border-top: 3px solid var(--itm-ink); }
.itm-legend i.nm { border-top: 2.5px dashed #80868f; margin-left: 8px; }
.itm-rels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.itm-rels li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 14.5px; }
.itm-rels li.sp { border-color: color-mix(in srgb, var(--itm) 60%, #fff); }
.itm-rels .itm-pair { min-width: 0; overflow-wrap: anywhere; }
.itm-rels b { font-family: var(--f-round); }
.itm-rels li.sp b { color: var(--itm-ink); }
.itm-rels small { font-size: 12.5px; color: var(--muted); }
.itm-no { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--itm-ink); color: var(--itm-ink); display: inline-grid; place-items: center; font: 700 12px/1 var(--f-round); align-self: center; }

/* みんなの役割 */
.itm-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.itm-person { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.itm-person.me { border: 2px solid var(--itm-ink); }
.itm-pname { font-family: var(--f-round); overflow-wrap: anywhere; }
.itm-prole { font-weight: 800; color: var(--itm-ink); }
.itm-person small { font-size: 12.5px; color: var(--ink2); line-height: 1.5; }
.itm-vacant { font-size: 14px; color: var(--ink2); background: #fff; border: 1px dashed #c9c9c2; border-radius: 12px; padding: 10px 12px; }
.itm-vacant b { color: var(--ink); }
.itm-play { margin-top: 24px; }
/* 送る少し前に発表された人への知らせ（結果の上）・自動で消える日 */
.itm-late { margin-top: 12px; background: var(--itm-t); border-left: 4px solid var(--itm-ink); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.itm-keep { margin-top: 18px; }

/* 画像 */
.itm-img { gap: 10px; }
.itm-img .share > h2, .itm-img > h2 { font-size: 19px; }
.itm-share .share { margin-top: 0; }
.itm-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.itm-check input { width: 22px; height: 22px; accent-color: var(--itm-ink); flex: none; }

/* つくる（自分たちのグループ） */
.itm-cta { background: var(--itm-t); border-radius: 18px; padding: 16px; gap: 10px; }
.itm-cta h2 { font-size: 18px; }
.itm-cta p { font-size: 14px; color: var(--ink2); }

/* 入口ページ /itsumen/ */
.itm-intro { padding: 22px 0 6px; display: grid; gap: 14px; }
.itm-intro h1 { font-size: clamp(28px, 7.6vw, 36px); }
/* 入口の一番上のボタン（下の「グループをつくる」へ飛ぶ）。ほかの入口の「はじめる」と同じく、ふつうの .btn の形で、上の段との間は .itm-intro の gap（14px）だけ
   （「このメンバーで始める」の囲み .itm-start とは別のもの） */
.itm-intro .itm-jump { display: flex; margin: 0; }
.itm-hero { background: var(--itm); border-radius: 24px; padding: 14px; display: grid; gap: 6px; color: var(--ink); }
.itm-hero .top { display: flex; justify-content: space-between; gap: 10px; font: 800 11.5px/1.2 var(--f-round); letter-spacing: .14em; }
.itm-hero svg { width: 100%; max-width: 340px; height: auto; justify-self: center; display: block; }
.itm-hero p { font-size: 14px; font-weight: 700; }
.itm-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.itm-points li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--ink2); }
.itm-points b { display: block; font-family: var(--f-round); color: var(--ink); font-size: 15.5px; }
.itm-make { background: #fff; border: 1.5px solid color-mix(in srgb, var(--itm) 45%, #fff); border-radius: 18px; padding: 16px; }
.itm-make > h2 { font-size: 20px; }
.itm-sizes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.itm-sizes .itm-pick { font-family: var(--f-round); font-size: 16px; padding: 6px 0; }
.itm-role-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.itm-role-list li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--ink2); }
.itm-role-list b { font-family: var(--f-round); color: var(--ink); }
.itm-role-list i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--itm-ink); background: var(--itm-t); border-radius: 999px; padding: 0 8px; margin-left: 6px; }
.itm-steps li::before { background: var(--itm); color: var(--ink); }