/* コミュニティ用の追加分。土台は本体と同じ work.css。
   フォーム部品は本体 contact.html の <style> をそのまま写したもの。 */
.form{margin-block-start:2rem}
.field{margin-block-start:1.5rem}
.field label{display:block;font-weight:900;font-size:.92rem;letter-spacing:.06em;margin-block-end:.55rem}
.field .req{display:inline-block;margin-inline-start:.6em;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--acc);border-radius:999px;padding:.15em .7em;vertical-align:.12em}
.field .opt{display:inline-block;margin-inline-start:.6em;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--sumi-3);border:1px solid rgba(28,27,25,.28);border-radius:999px;padding:.15em .7em;vertical-align:.12em}
.field input,.field select,.field textarea{
  inline-size:100%;font:inherit;font-weight:500;color:var(--sumi);background:var(--white);
  border:1.5px solid rgba(28,27,25,.24);border-radius:12px;padding:.85rem 1rem;line-height:1.8;
}
.field textarea{min-block-size:11em;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.field__note{font-size:.84rem;color:var(--sumi-3);margin-block-start:.5rem}
.agree{display:flex;align-items:flex-start;gap:.7rem;margin-block-start:1.8rem;font-size:.92rem}
.agree input{inline-size:1.25em;block-size:1.25em;margin-block-start:.35em;flex:none;accent-color:var(--acc)}
.submit{
  margin-block-start:1.8rem;inline-size:100%;max-inline-size:22em;font:inherit;font-weight:900;font-size:1rem;letter-spacing:.08em;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--sumi);color:var(--paper);border:0;border-radius:999px;padding:1.15rem 1.6rem;transition:transform .2s;
}
.submit::after{content:"";inline-size:.55em;block-size:.55em;border-block-start:2.5px solid currentColor;border-inline-end:2.5px solid currentColor;transform:rotate(45deg)}
.submit:hover{transform:translateY(-3px)}
.mail{margin-block-start:1.2rem;font-weight:900;font-size:1.15rem;letter-spacing:.04em}
.mail a{text-decoration:none;border-block-end:2px solid var(--acc)}
.note{margin-block-start:2.4rem;padding:1.3rem 1.4rem;background:var(--tint);border-radius:14px;font-size:.92rem}
.note b{display:block;font-weight:900;margin-block-end:.5rem}

/* ---------- コミュニティ入口（ここから下だけ独自） ---------- */
.pw{position:relative}
.pw input{padding-inline-end:4.6rem}
.pw__eye{
  position:absolute;inset-block:0;inset-inline-end:.4rem;margin-block:auto;block-size:2.4rem;
  font:inherit;font-weight:700;font-size:.8rem;letter-spacing:.08em;color:var(--sumi-2);
  background:none;border:0;border-radius:999px;padding:0 .9rem;cursor:pointer;
}
.pw__eye:hover{background:rgba(28,27,25,.06)}
.agree{cursor:pointer;align-items:center}
.agree input{margin-block-start:0}
.err{margin-block-start:1.6rem;padding:1rem 1.2rem;border-radius:12px;background:color-mix(in srgb,var(--shu) 9%,var(--white));border-inline-start:4px solid var(--shu);font-weight:700;font-size:.92rem}
.submit{max-inline-size:none}
@media (min-width:600px){.submit{max-inline-size:22em}}
.hd__cta{white-space:nowrap}
/* 入口は「入れる」が最初の画面に収まるよう、背景英字の帯を詰める（見た目の作法は本体と同じ） */
.cm-login .top{padding-block:clamp(5.6rem,13vw,7rem) calc(var(--arc) + clamp(3.4rem,13vw,7.5rem) * .85 + 1rem)}
.cm-login .top__word{font-size:clamp(3.4rem,13vw,7.5rem)}
.cm-login .body{padding-block-start:calc(var(--arc) + clamp(1.4rem,4vw,2.4rem))}

/* ---------- 部屋の中 ---------- */
.cm-room .top{padding-block:clamp(5.6rem,13vw,7rem) calc(var(--arc) + clamp(3.4rem,13vw,7.5rem) * .85 + 1rem)}
.cm-room .top__word{font-size:clamp(3.4rem,13vw,7.5rem)}
.cm-room .body{padding-block-start:calc(var(--arc) + clamp(1.4rem,4vw,2.4rem))}
.cm-room .top__h1{font-size:clamp(1.8rem,6.6vw,3.2rem)}

/* 最新のメルマガ */
.cm-latest{position:relative;display:grid;gap:.3rem;margin-block-start:1.4rem;padding:1.3rem 3rem 1.3rem 1.4rem;background:color-mix(in srgb,var(--shu) 8%,var(--white));color:var(--sumi);border:1.5px solid color-mix(in srgb,var(--shu) 35%,transparent);border-radius:18px;text-decoration:none;transition:transform .2s,border-color .2s}
.cm-latest:hover{border-color:var(--shu)}
.cm-latest::after{content:"";position:absolute;inset-inline-end:1.4rem;inset-block-start:50%;inline-size:.5em;block-size:.5em;border-block-start:2.5px solid var(--shu);border-inline-end:2.5px solid var(--shu);transform:translateY(-50%) rotate(45deg)}
.cm-latest:hover{transform:translateY(-3px)}
.cm-latest__vol{color:var(--shu)}
.cm-latest__t{font-weight:900;line-height:1.6}

/* 入口のカード（スマホ1列・広い画面で2列） */
.cm-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.9rem}
@media (min-width:640px){.cm-grid{grid-template-columns:1fr 1fr}}
.cm-card{position:relative;display:grid;gap:.25rem;block-size:100%;padding:1.3rem 3rem 1.3rem 1.4rem;background:var(--white);border:1.5px solid rgba(28,27,25,.14);border-radius:18px;text-decoration:none;transition:transform .2s,border-color .2s}
.cm-card:hover{transform:translateY(-3px);border-color:var(--sumi)}
.cm-card::after{content:"";position:absolute;inset-inline-end:1.4rem;inset-block-start:50%;inline-size:.5em;block-size:.5em;border-block-start:2.5px solid currentColor;border-inline-end:2.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.cm-card__en{color:var(--shu)}
.cm-card__t{font-weight:900;font-size:1.1rem;line-height:1.5}
.cm-card__d{font-size:.86rem;color:var(--sumi-2);line-height:1.8}

/* アーカイブの一覧 */
.cm-list{list-style:none;margin:0;padding:0}
.cm-list li{border-block-end:1px solid rgba(28,27,25,.18)}
.cm-list li:first-child{border-block-start:1px solid rgba(28,27,25,.18)}
.cm-list a{display:grid;grid-template-columns:auto 1fr;gap:0 1rem;padding-block:1.1rem;text-decoration:none}
.cm-list a:hover .cm-list__t{text-decoration:underline}
.cm-list__vol{color:var(--shu);padding-block-start:.3em}
.cm-list__date{font-size:.84rem;color:var(--sumi-3)}
.cm-list__t{grid-column:1 / -1;font-weight:900;line-height:1.6}
.cm-empty{padding-block:1rem;color:var(--sumi-3)}

/* メルマガ本文：届いたときの改行をそのまま見せる */
.cm-mail{white-space:pre-wrap;line-height:2;font-size:1rem}
.cm-mail a{color:var(--shu)}
.cm-backlink{margin-block-start:2.4rem}
.cm-backlink a{font-weight:700}

/* 仮の枠 */
.cm-kari{color:var(--sumi-3);font-weight:700;letter-spacing:.04em;border:1.5px dashed rgba(28,27,25,.25);border-radius:14px;padding:1.6rem;line-height:1.9}
.cm-kari b{display:inline-block;margin-inline-end:.6em;padding:.05em .7em;border-radius:999px;background:var(--shu);color:#fff;font-size:.78rem}

/* ヘッダーのサイト名：コミュニティ名は長いので小さめに */
.hd__name{font-size:clamp(.88rem,3.6vw,1.05rem);letter-spacing:.14em}

/* ---------- フッター（本体と同じ丸い境目で、少し濃い紙の段を重ねる） ---------- */
.cm-room .body{padding-block-end:calc(var(--arc) + clamp(2.6rem,6vw,4rem))}
.cm-ft{position:relative;margin-block-start:calc(var(--arc) * -1);background:#ebe7dd;border-radius:50% 50% 0 0 / var(--arc) var(--arc) 0 0;padding-block:calc(var(--arc) + clamp(1.6rem,4vw,2.6rem)) calc(clamp(2rem,6vw,3rem) + env(safe-area-inset-bottom))}
.cm-ft__name{display:flex;align-items:center;gap:.6em;font-weight:900;letter-spacing:.14em}
.cm-ft__name::before{content:"";inline-size:.62em;block-size:.62em;border-radius:50%;background:var(--shu)}
.cm-ft__nav{display:grid;gap:.1rem;margin-block-start:1.2rem}
.cm-ft__nav a{display:block;padding-block:.55rem;font-weight:700;font-size:.92rem;text-decoration:none;border-block-end:1px solid rgba(28,27,25,.12)}
.cm-ft__nav a:hover{color:var(--shu)}
@media (min-width:640px){.cm-ft__nav{grid-template-columns:1fr 1fr;column-gap:2rem}}
.cm-ft__note{margin-block-start:1.6rem;font-size:.8rem;line-height:1.9;color:var(--sumi-2)}
.cm-ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.6rem;margin-block-start:1.4rem;font-size:.78rem;color:var(--sumi-3)}
.cm-ft__bottom a{font-weight:700;color:var(--sumi-2)}
.cm-ft__name{text-decoration:none}
a.hd__name:hover,a.cm-ft__name:hover{color:var(--shu)}

/* ---------- メンバー紹介（スマホ2列・広い画面で3列） ---------- */
.cm-mems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (min-width:640px){.cm-mems{grid-template-columns:repeat(3,1fr);gap:1rem}}
.cm-mem{text-decoration:none;transition:transform .2s,border-color .2s;block-size:100%;display:grid;justify-items:center;gap:.15rem;padding:1.3rem .6rem 1.1rem;background:var(--white);border:1.5px solid rgba(28,27,25,.12);border-radius:18px;text-align:center}
.cm-face{inline-size:74px;block-size:74px;border-radius:50%;object-fit:cover;margin-block-end:.6rem;box-shadow:0 0 0 3px var(--paper),0 0 0 4.5px rgba(28,27,25,.12)}
.cm-face--init{display:grid;place-items:center;background:color-mix(in srgb,var(--shu) 12%,var(--white));color:var(--shu);font-weight:900;font-size:1.6rem}
.cm-face--ai{display:grid;place-items:center;background:var(--white)}
.cm-face--ai img{inline-size:52px;block-size:auto}
.cm-mem__name{font-weight:900;font-size:1.02rem;line-height:1.5}
.cm-mem__fb{font-size:.76rem;color:var(--sumi-3);line-height:1.5}
.cm-mem:hover{transform:translateY(-3px);border-color:var(--sumi)}
/* 一人のページ */
.cm-prof{display:flex;align-items:center;gap:1.2rem}
.cm-prof .cm-face{inline-size:96px;block-size:96px;margin:0;flex:none}
.cm-prof .cm-face--ai img{inline-size:64px}
.cm-prof__name{font-size:clamp(1.7rem,6vw,2.6rem)}
.cm-prof__fb{font-size:.86rem;color:var(--sumi-3);margin-block-start:.2rem}

/* メンバー紹介を1枚に：上の顔一覧は小さく詰める */
.cm-mems{grid-template-columns:repeat(3,1fr);gap:.6rem}
@media (min-width:640px){.cm-mems{grid-template-columns:repeat(5,1fr)}}
.cm-mems .cm-mem{padding:.9rem .3rem .7rem}
.cm-mems .cm-face{inline-size:56px;block-size:56px;margin-block-end:.4rem}
.cm-mems .cm-face--ai img{inline-size:40px}
.cm-mems .cm-mem__name{font-size:.84rem}
.cm-who{margin-block-start:clamp(2.6rem,7vw,4rem);padding-block-start:clamp(2rem,5vw,3rem);border-block-start:2px solid var(--sumi);scroll-margin-block-start:1rem}
.cm-prof__name{font-weight:900;font-size:clamp(1.4rem,5vw,1.9rem);line-height:1.4}
.cm-who__blk{margin-block-start:1.6rem}
.cm-who__h{font-weight:900;font-size:1rem;letter-spacing:.06em;color:var(--shu);margin-block-end:.6rem}
.cm-who__up{margin-block-start:1.4rem;font-size:.84rem}
.cm-who__up a{color:var(--sumi-2)}
html{scroll-behavior:smooth}

/* 続きを読む（開いたらボタンは消えて、続きがそのまま下につながる） */
.cm-more{margin-block-start:.2rem}
.cm-more summary{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;list-style:none;font-weight:700;font-size:.88rem;color:var(--shu);padding:.5rem 1.1rem;border:1.5px solid color-mix(in srgb,var(--shu) 45%,transparent);border-radius:999px;margin-block-start:.6rem}
.cm-more summary::-webkit-details-marker{display:none}
.cm-more summary::after{content:"";inline-size:.45em;block-size:.45em;border-block-end:2px solid currentColor;border-inline-end:2px solid currentColor;transform:translateY(-.15em) rotate(45deg)}
.cm-more summary:hover{background:color-mix(in srgb,var(--shu) 8%,var(--white))}
.cm-more[open] summary{display:none}
.cm-mail strong{font-weight:900}

/* ---------- 号ごとの「みんなのアウトプット」 ---------- */
.cm-outs__n{font-size:.84rem;color:var(--sumi-3);margin-block-start:.6rem}
.cm-out{margin-block-start:1.4rem;padding:1.3rem 1.3rem 1.2rem;background:var(--white);border:1.5px solid rgba(28,27,25,.12);border-radius:18px}
.cm-out__who{display:flex;align-items:center;gap:.8rem;margin-block-end:.8rem}
.cm-out__who .cm-face{inline-size:44px;block-size:44px;margin:0;box-shadow:0 0 0 2px var(--white),0 0 0 3.5px rgba(28,27,25,.12)}
.cm-out__who .cm-face--ai img{inline-size:30px}
.cm-out__name{font-weight:900}
.cm-out .cm-mail{font-size:.95rem}

/* 紹介（おとさん／クロードから）は色つきの枠、本人の自己紹介は地のまま＝2つを見分けやすく（おとさん 2026-09-25） */
.cm-who__blk--from{padding:1.2rem 1.3rem 1.3rem;background:color-mix(in srgb,var(--shu) 7%,var(--white));border:1.5px solid color-mix(in srgb,var(--shu) 32%,transparent);border-radius:18px}
.cm-who__blk--from .cm-who__h{display:inline-block;margin-block-end:.7rem;padding:.2em .9em;border-radius:999px;background:var(--shu);color:#fff;font-size:.82rem}
.cm-who__blk--from .cm-mail{font-size:.98rem}
.cm-who__blk--self{margin-block-start:2rem}
.cm-mail--p{white-space:normal;line-height:1.95}
.cm-mail--p p+p{margin-block-start:.85em}