/* 2026-09-17 外への送信を1つ消した（14章 ■7「Google Fonts を外から読み込まない」・12章「外から読み込む重い部品を作らない」）。
   旧：@import で Google Fonts（Inter・Noto Sans JP）を外から読み込んでいた … 開くたびに利用者のIPアドレスなどが Google に送られていた。
   フォントのファイルを自分のサーバーに置く形（fonts/）は、Noto Sans JP が3太さで数MBになり海外から遅くなるため採らず、
   端末に入っている同じ系統の書体（Noto Sans JP・ヒラギノ・游ゴシック）を順に使う形にした。tests/design.spec.mjs が googleapis の無いことを確かめる */
/* =========================================================
   Latent Data Bank ／ 仲介プラットフォーム
   実測してTTPしたもの（2026-09-09）
     Mercor  … Inter／見出しに letter-spacing -.025em／角丸 12px／
               影ではなく inset 0 0 0 1px の細いリング
     Linear  … 文字はほぼ黒 #08090a／境界は #e2e4e7 のヘアライン
     Deel    … 本文 #1b1b1b／地はわずかに温かい白
   方針：中央揃えを減らし、左揃えと余白で組む。色は1色だけ。
        影を使わず1pxの線で面を分ける。数字は等幅にする。
   ========================================================= */
:root{
  /* 2026-09-18 12章のデザインの変数（節10の未対応）を入れた。旧の名前は新しい変数を指す別名として残し、既存の見た目を保つ
     旧：--bg:#ffffff／--ground:#faf9f7／--fg:#111315／--fg-2:#3d4247／--muted:#6b7177／--faint:#9aa0a6／--line:#e6e8eb／--line-2:#f0f1f3 */
  /* 2026-09-23 色調を、ワーカーを集める14社の実測の統計に合わせた。
     📌 根拠：2026-09-23 本人「もっとも統計的に良い色調で調節して、正クラウドワークスと同じにはしないこと」
     実測（各社のCSSと画面から）：青系 10/14（71%）・緑 2（Upwork/Fiverr）・赤 1（ビズリーチ）・黒 1（Contra）。
       青の中央値＝色相210／彩度84／明度45。地は白かごく薄い青。色は主色＋差し色の2色だけ。
     当社は色相を分布の上側 220 に置いた（クラウドワークス205・ランサーズ210 と10〜15度離す）。
     旧：--bg:#fffff8（生成り）／--fg:#0a0a0a／--rule:#d8d8cc／--rule-thin:#eeeee2／--stripe:#fdfdf2 */
  --bg:#ffffff;          /* 地・白（14社のうち地が白でないのはクラウドワークスの登録画面だけ） */
  --fg:#10141a;          /* ほぼ黒。わずかに青を含める */
  --fg-sub:#46505c;      /* 日付・注記だけ */
  --rule:#dde3ea;
  --rule-thin:#eef1f5;
  --stripe:#f7f9fc;      /* 表の縞 */
  --pad-side:22px;
  --ground:#f3f6fa;      /* 節を分ける、地より一段濃い面（薄い青。クラウドワークスの #e7f1fa より薄く） */
  --card:#ffffff;
  --fg-2:#28303a;        /* 本文の二番手 */
  --muted:var(--fg-sub);
  --faint:#6b7683;
  --line:var(--rule);    /* ヘアライン */
  --line-2:var(--rule-thin);
  --on-fg:var(--bg);     /* 濃い面（押す所など）の上の文字 */
  --bar-bg:rgba(255,255,255,.92);
  --ink:#0d1b2a;
  /* 2026-09-23 差し色を、実測した青の統計の位置に置いた（色相220・彩度84・明度40）。白文字とのコントラストは 7.8:1（AAA）。
     使う所は押す所・いま見ている所・リンクだけ。数字には色をつけない（01 節5）
     旧（2026-09-17）：--accent:#93332a（朱）・--accent-soft:#f7ecea・--accent-ring:rgba(147,51,42,.35) */
  --accent:#1049bc;      /* 差し色はこの1色だけ */
  --accent-soft:#eaf0fb;
  --star:#e8a200;        /* 2026-09-24 ワーカー一覧の評価の星だけ */
  --accent-ring:rgba(16,73,188,.35);
  --accent-dark:#0c3a96;  /* 押す所に重ねたとき */
  --on-accent:#ffffff;    /* 主色の上の文字 */
  --err:#c0392b;         /* 足りない欄 */
  --err-soft:#fdf3f2;
  --pay:#b4530a;         /* 金額。彩度を落として品を残す */
  --pay-ring:rgba(180,83,10,.35);   /* 2026-09-17 旧：var(--pay-ring)（自分自身を指していた） */
--pay-soft:#fdf4ec;    /* 2026-10-16 オレンジの薄い地（試しの2つの約束の箱）。旧：この色は無かった */
  --ok:#0f7a4d;
  --ok-soft:#eaf6f0;
  --ok-ring:rgba(15,122,77,.35);    /* 2026-09-17 旧：var(--ok-ring)（自分自身を指していた） */
  --shadow:rgba(13,27,42,.28);
  --hero-shadow:rgba(0,0,0,.55);   /* 2026-09-24 トップの画像の上の白い文字の影。旧：.hero の中に直接 rgba(0,0,0,.55)（design 6 のテストで検出） */
  /* 2026-09-17 :root の外に直接書いていた色を変数にした（12章の実装 1「ファイルの中に直接の色を書かない」） */
  --scrim:rgba(13,27,42,.55);        /* 重ねて出す知らせの下の暗幕。旧 .ovl の rgba(13,27,42,.55) */
  --shadow-soft:rgba(13,27,42,.3);   /* 小さな知らせ・切り替えのつまみ。旧 rgba(13,27,42,.3)・.26 */
  --print-bg:#fff; --print-fg:#000;  /* 印刷。旧 @media print の #fff・#000 */
  --read:calc(1000px + var(--pad-side) * 2);   /* 2026-09-24 旧：1120px。全ページを中身1000pxにそろえた */
  /* 2026-09-17 12章の書体の変数。--sans は旧の名前（中身は --font-body と同じ） */
  /* 2026-09-23 Windows で細く見えないように、游ゴシックは Medium・UI を先に置いた（クラウドワークスと同じ系統の角ゴシック）。
     旧：--font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,-apple-system,"Segoe UI",system-ui,sans-serif; */
  --font-body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",
              "Yu Gothic UI","Yu Gothic",Meiryo,"Segoe UI",system-ui,sans-serif;
  /* 2026-09-23 見出しも本文と同じゴシックにした。📌 根拠：2026-09-23 本人「クラウドワークスのフォントを真似てほしい。
     フォントに違和感がある今は明朝体かな？合ってない」。クラウドワークスは見出しも本文もゴシック（端末の標準の角ゴシック）。
     旧：--font-head:Georgia,"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;（＝明朝体） */
  --font-head:var(--font-body);
  --font-num:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:var(--font-body);   /* 旧："Inter","Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif（Inter は外から読み込んでいた） */
  --r:12px;              /* カード */
  --r-s:7px;             /* ボタン・入力 */
  --ring:inset 0 0 0 1px rgba(10,10,10,.10);
  --ring-hi:inset 0 0 0 1px rgba(10,10,10,.20);
  /* 2026-10-07 広告用の入口（AIスキル診断・shindan.php の .sdlp）だけの色。濃い紺の地に黄色の見出しとボタン（暗い画面でも同じ）。
     📌 根拠：2026-10-07 本人「広告用のLPを作って欲しい。クリックできるように。目立つLP」 */
  --lp-bg:#0b1f4b; --lp-bg-2:#13306e; --lp-fg:#ffffff; --lp-sub:#c9d4ea; --lp-hi:#ffd60a; --lp-hi-dark:#f0c400; --lp-on-hi:#0b1f4b;
  --lp-shadow:rgba(0,0,0,.35);
  --sd-art-shadow:rgba(16,73,188,.14); --sd-me:rgba(16,73,188,.05); --sd-fix-shadow:rgba(0,0,0,.06);   /* 2026-10-08 入口（Duolingo の配置）の影と、くらべ表の「この診断」の列 */
}
/* 暗い画面：変数を差し替えるだけ（12章 節10） */
@media (prefers-color-scheme: dark){
  :root{
    /* 2026-09-23 明るい画面の青に合わせた。旧：生成りと朱の暗い画面用
       （--bg:#12120f／--fg:#f2f2ea／--rule:#35352f／--ground:#191916／--card:#1d1d19／--accent:#e39a8f） */
    --bg:#0f1317; --fg:#eef2f7; --fg-sub:#a9b4c0; --rule:#2c343d; --rule-thin:#1d2329; --stripe:#141920;
    --ground:#151a20; --card:#191f26; --fg-2:#dbe2ea; --faint:#8b96a3;
    --bar-bg:rgba(15,19,23,.92); --ink:#e8eef5;
    --accent:#7aa7f5; --accent-soft:#16233c; --accent-ring:rgba(122,167,245,.35); --accent-dark:#9dbef8; --on-accent:#0f1317;
    --err:#ff8f80; --err-soft:#2b1714; --pay:#f0a863; --pay-ring:rgba(240,168,99,.4); --pay-soft:#2b1d10;   /* 2026-10-16 --pay-soft を足した */
    --ok:#62d39c; --ok-soft:#14261d; --ok-ring:rgba(98,211,156,.35); --shadow:rgba(0,0,0,.5);
    --scrim:rgba(0,0,0,.6); --shadow-soft:rgba(0,0,0,.45);
    --ring:inset 0 0 0 1px rgba(242,242,234,.12); --ring-hi:inset 0 0 0 1px rgba(242,242,234,.24);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt"}
.wrap{max-width:var(--read); margin:0 auto; padding:0 var(--pad-side)}   /* 旧 padding:0 24px（スマホ 18px） */
/* 2026-09-24 全ページの横幅を、お仕事一覧（クラウドワークスの実測）と同じ中身1000pxにそろえた。
   📌 根拠：本人「お仕事一覧の横幅がみやすいから、それにすべてのページを統一させてほしい」。旧：.wrap.wide 1180px・.wrap（--read）1120px */
.wrap.wide{max-width:calc(1000px + var(--pad-side) * 2)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
/* 2026-09-23 見出しを本文と同じゴシック・太さ700に戻した（クラウドワークスに合わせた）。
   旧（2026-09-17）：--font-head（Georgia・Noto Serif JP＝明朝体）・太さ600 */
h1,h2,h3{margin:0; font-family:var(--font-head); font-weight:700; letter-spacing:-.01em; line-height:1.4}
/* 日本語を語の途中で折らない（Chrome 119+。非対応ブラウザは無視する）
   狭い列に効かせると行が短く割れて汚くなるので、広い文字にだけ当てる */
h1,h2,h3,.hero h1,.deck,.sub,.mission,.mnote,p.big,.plist p,.jsum,.sechead p,.jtitle,.key{
  word-break:auto-phrase}
p{margin:0 0 1em}
b{font-weight:600}

/* ---------------- 上のバー ---------------- */
.sitebar{position:sticky; top:0; z-index:50; background:var(--bar-bg);
  backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--line)}
.sitebar .wrap{display:flex; align-items:center; gap:20px; height:62px}
/* 2026-09-23 太さは 400 と 700 だけにした。📌 根拠：2026-09-23 本人「マイページ とか、そういうところのフォントが違和感」。
   Windows の游ゴシック・メイリオは太さを2つ（400・700）しか持たないため、500・600 は機械が太らせた形になって崩れる。
   旧：.brand 600／nav.main a 500／a.on 600／.mylink・.langsw 500／.navcta 600 */
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15px;
  color:var(--fg); letter-spacing:-.015em; white-space:nowrap}
.brand .mark{display:flex; width:18px; height:18px; flex:none}
.brand .mark svg{width:18px; height:18px; display:block}
.brand:hover{text-decoration:none; color:var(--accent)}
.sitebar nav.main{flex:1; min-width:0}
.sitebar nav.main ol{display:flex; gap:2px; margin:0; padding:0; list-style:none;
  overflow-x:auto; scrollbar-width:none}
.sitebar nav.main ol::-webkit-scrollbar{display:none}
.sitebar nav.main a{display:block; padding:7px 12px; border-radius:var(--r-s);
  color:var(--fg-2); font-size:14px; font-weight:700; white-space:nowrap; transition:.13s}
.sitebar nav.main a:hover{color:var(--fg); background:var(--ground); text-decoration:none}
.sitebar nav.main a.on{color:var(--fg); font-weight:700}
.mylink,.langsw{flex:none; font-size:13.5px; font-weight:700; color:var(--fg-2);
  padding:7px 11px; border-radius:var(--r-s); white-space:nowrap; transition:.13s}
.mylink:hover,.langsw:hover{color:var(--fg); background:var(--ground); text-decoration:none}
.navcta{flex:none; background:var(--accent); color:var(--on-accent); font-size:13.5px; font-weight:700;
  padding:9px 18px; border-radius:var(--r-s); white-space:nowrap; letter-spacing:0}
.navcta:hover{background:var(--accent-dark); text-decoration:none; color:var(--on-accent)}
/* ページ群の中の段（2026-09-17）。ヘッダーは相手で分けた2つだけにして、その先はここに小さく並べる */
.subnav{border-bottom:1px solid var(--line); background:var(--card)}
.subnav ol{display:flex; flex-wrap:wrap; gap:2px 4px; margin:0; padding:6px 0; list-style:none}   /* 横に流さず折り返す（スマホではみ出さない） */
.subnav ol::-webkit-scrollbar{display:none}
.subnav a{display:block; padding:6px 12px; border-radius:var(--r-s); color:var(--muted); font-size:13.5px; white-space:nowrap}
.subnav a:hover{color:var(--fg); background:var(--ground); text-decoration:none}
.subnav a[aria-current="page"]{color:var(--fg); font-weight:600; background:var(--ground)}

/* ---------------- ページ見出し ---------------- */
header{border-bottom:1px solid var(--line); background:var(--ground); padding:44px 0 38px}
header h1{font-size:33px; letter-spacing:-.03em; margin-bottom:12px; max-width:20em}
header .lead{color:var(--fg-2); font-size:16px; line-height:28px;
  letter-spacing:.01em; margin:0; max-width:36em}
header .meta{display:none}

/* ---------------- ホーム：見出し ---------------- */
/* ヒーローは画面いっぱい。次のセクションが下から覗かないようにする */
.hero{background:var(--ground); border-bottom:1px solid var(--line);
  min-height:calc(100vh - 62px); min-height:calc(100svh - 62px);
  display:flex; align-items:center; padding:48px 0 44px; overflow:hidden}
.hero .wrap{width:100%}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 20px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--faint)}
/* 大見出し。下の .wrap > h1（ページ見出し用）に上書きされないよう .hero .wrap > h1 で指定する（2026-09-11）
   大きさはお手本の実測に合わせる：PC 64px（Mercor・Linear 64／Deel 48／Stripe 44）、スマホ 36px（34〜38）
   旧: .hero h1{clamp(34px,6.2vw,78px)} … 実際には .wrap > h1 に負けて PC 34px・スマホ 24px に縮んでいた */
.hero .wrap > h1{font-size:clamp(36px,5vw,64px); letter-spacing:-.045em; line-height:1.11;
  max-width:none; margin:0 0 28px}
.hlead{max-width:none; margin:0 0 38px}
.hlead p{margin:0}
/* 1段落目：主張。大きく、ほぼ黒で組む */
.hlead .deck{font-size:20.5px; line-height:1.74; letter-spacing:-.016em; color:var(--fg);
  max-width:34em; margin:0 0 24px}
.hlead .deck b{font-weight:600}
/* 2段落目：補足。細い罫を引いて一段落とす */
.hlead .sub{font-size:15px; line-height:1.95; color:var(--muted); max-width:44em;
  padding-left:18px; border-left:2px solid var(--rule)}
.hlead .sub b{color:var(--fg-2); font-weight:600}
.hlead b{color:var(--fg); font-weight:600}
.hbtns{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:0 0 46px}
/* ヒーローのボタンは右へ。左に寄った本文と釣り合わせる */
.hero .hbtns{justify-content:flex-end; margin:34px 0 46px}
/* 2026-09-23 押す所は主色（青）にした。実測した14社は、いずれも押す所に主色を使っている。
   旧：background:var(--fg)（黒）／重ねたときに差し色へ変わる */
.cta{display:inline-block; background:var(--accent); color:var(--on-accent); font-weight:700;
  font-size:15px; letter-spacing:0; padding:13px 26px; border-radius:var(--r-s);
  transition:.14s}
.cta:hover{background:var(--accent-dark); text-decoration:none; color:var(--on-accent)}
/* 2026-09-23 <button> で使うときに、ブラウザの既定の枠が出ていたので消す（押す所を青にして見えるようになった） */
button.cta{border:0; cursor:pointer; font-family:var(--sans)}
.cta.ghost{background:transparent; color:var(--fg); box-shadow:var(--ring-hi)}
.cta.ghost:hover{background:var(--card); color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg)}
.cta.ghost.dark{color:var(--fg)}
.textlink{font-weight:600; font-size:15px; color:var(--fg)}
.textlink::after{content:" \2192"; color:var(--accent)}

/* 実測値の帯。カードにせず、細い線で区切る */
.statstrip{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); margin:0;
  padding:0; list-style:none}
.statstrip li{flex:1 1 0; min-width:180px; padding:24px 26px 28px 0;
  border-right:1px solid var(--line)}
.statstrip li:last-child{border-right:0}
.statstrip b{display:block; font-size:27px; font-weight:600; letter-spacing:-.035em;
  color:var(--fg); line-height:1.2; font-variant-numeric:tabular-nums}
.statstrip span{display:block; font-size:12.5px; color:var(--muted); margin-top:5px}

/* ---------------- セクション ---------------- */
.band{padding:76px 0; border-bottom:1px solid var(--line)}

/* ============================================================== トップページ（2026-09-23）
   📌 根拠：2026-09-23 本人「節同士がある程度間隔があるような状態が望ましい」「高さの幅が均一だったはず」
     「節同士が色が異なりページのような感じ」「ページの高さに合わせて、文字の大きさも多少変えてよい」
     「強みとなる部分をブロックで表示」「画像を、ここに後で入れる」
   統計：03_ページごとの統計（画像は7社の中央値53枚・当社0／分野のブロック3社／数字3社）
   トップだけに当てる（.homepage の中）。ほかのページの節は今までどおり */
.homepage .band{
  padding:104px 0;                       /* 旧：76px。節の間を広げた */
  min-height:min(82vh, 760px);           /* 節の高さをそろえる */
  display:flex; align-items:center;
  border-bottom:0;
}
.homepage .band > .wrap{width:100%}
.homepage .band:nth-of-type(even){background:var(--ground)}   /* 節ごとに色を変える（1枚ずつページのように） */
.homepage .band.alt{background:var(--ground)}
/* 2026-09-23 1つ目の節は白にする（次の節が薄い青なので、同じ色が2つ続かない） */
/* 2026-09-24 デスクトップでは1つ目の節を画面いっぱいに（上のバー62pxを引いた高さ）。下の節が見えないようにする。
   📌 根拠：本人「下の節が見えている。そのページで画面いっぱいに表示されるような節のおおきさにしてほしい、デスクトップにね」
   旧：min-height:min(88vh, 820px); padding-top:64px（高い画面では820pxで止まり、下の節がのぞいていた） */
.homepage .band.hero{background:var(--bg); min-height:calc(100vh - 62px); min-height:calc(100svh - 62px); padding:0; box-sizing:border-box}

/* 見出し：節が高くなった分、文字も大きく */
.homepage .band h1{font-size:clamp(40px, 6.4vw, 78px); line-height:1.12; letter-spacing:-.035em}
.homepage .hsub{margin:18px 0 0; font-size:clamp(19px, 2.3vw, 27px); font-weight:700; color:var(--fg-2); letter-spacing:-.02em}
.homepage .hlead{margin:22px 0 0}
.homepage .deck{font-size:clamp(16px, 1.8vw, 20px); line-height:1.8; margin:0}
.homepage .sechead h2{font-size:clamp(24px, 3.2vw, 36px); line-height:1.3}
.homepage .sechead p{font-size:15.5px}
.homepage h2{font-size:clamp(22px, 2.8vw, 32px)}

/* 画像（img/hero.webp を置くと出る。無いときは枠だけ） */
.shot{margin:30px auto 0; max-width:640px; border-radius:var(--r); overflow:hidden; background:var(--ground)}
.shot img{display:block; width:100%; height:auto}
.shot img,.shot.empty{aspect-ratio:16/9; max-height:360px; object-fit:cover; width:100%}
.shot.empty{display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); background:var(--ground); color:var(--faint); font-size:13.5px}

/* 強みの4ブロック（数字の帯） */
.homepage .statstrip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  list-style:none; margin:0; padding:0}
.homepage .statstrip li{background:var(--card); border-radius:var(--r); padding:28px 24px;
  box-shadow:var(--ring)}
.homepage .statstrip b{display:block; font-size:clamp(28px, 3.6vw, 40px); font-weight:700;
  letter-spacing:-.03em; line-height:1.15; font-variant-numeric:tabular-nums}
.homepage .statstrip span{display:block; margin-top:9px; font-size:13.5px; line-height:1.65; color:var(--fg-sub)}

/* 分野のブロック */
.fields{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; list-style:none; margin:0; padding:0}
.fields li{background:var(--card); border-radius:var(--r); padding:22px 20px; box-shadow:var(--ring)}
.fields b{display:block; font-size:16.5px; font-weight:700; letter-spacing:-.01em}
.fields span{display:block; margin-top:7px; font-size:13.5px; line-height:1.7; color:var(--fg-sub)}

/* 入口の2つのカード：節が広くなった分だけ上に余白 */
.homepage .doors{margin-top:34px}

@media (max-width:860px){
  .homepage .band{padding:64px 0; min-height:0; display:block}
  .homepage .band.hero{min-height:0}
  .homepage .statstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .homepage .statstrip,.fields{grid-template-columns:1fr}
}
/* ============================================================== トップページ ここまで */

.band.alt{background:var(--ground)}
.band:last-of-type{border-bottom:0}
.secgrid{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:56px}
.sechead h2{font-size:25px; letter-spacing:-.03em; margin:0 0 13px}
.sechead p{color:var(--muted); font-size:14.5px; margin:0}
.sechead .eyebrow{margin-bottom:14px}
.band h2{font-size:27px; letter-spacing:-.03em}
.wrap h2{font-size:20px; letter-spacing:-.024em; margin:40px 0 14px}
.rowhead{display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; margin:0 0 24px; flex-wrap:wrap}

/* 問題を並べる：カードにせず、番号と罫線で組む */
.plist{list-style:none; margin:0; padding:0; counter-reset:p}
.plist > li{counter-increment:p; display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:26px 0; border-top:1px solid var(--line)}
.plist > li:first-child{border-top:0; padding-top:0}
.plist .pn{font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--faint);
  padding-top:5px}
.plist h3{font-size:18px; letter-spacing:-.022em; margin:0 0 6px}
.plist .fig{font-size:34px; font-weight:600; letter-spacing:-.04em; color:var(--fg);
  line-height:1.15; margin:0 0 8px; font-variant-numeric:tabular-nums}
.plist .fig em{font-style:normal; font-size:14px; font-weight:500; color:var(--muted);
  letter-spacing:0; margin-left:10px}
.plist p{color:var(--fg-2); font-size:14.5px; margin:0}

/* 並べる箱：融合させず、1つずつ独立したカードにする */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(208px,1fr)); gap:14px}
.col{background:var(--ground); box-shadow:var(--ring); border-radius:var(--r);
  padding:26px 24px 28px}
.band.alt .col{background:var(--card)}
.col h3{font-size:16.5px; letter-spacing:-.02em; margin:0 0 9px}
.col p{margin:0; color:var(--fg-2); font-size:14.5px}
.col.num h3{font-size:30px; letter-spacing:-.04em; color:var(--fg); margin-bottom:12px;
  font-variant-numeric:tabular-nums}

/* 手順：縦に積まず、1pxの罫で区切って横に並べる */
.steps{counter-reset:s; list-style:none; margin:0 0 30px; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(176px,1fr)); gap:12px}
.steps li{counter-increment:s; background:var(--ground); box-shadow:var(--ring);
  border-radius:var(--r); padding:22px 20px 24px}
.band.alt .steps li{background:var(--card)}
.steps li::before{content:counter(s,decimal-leading-zero); display:block; font-size:11.5px;
  font-weight:600; color:var(--faint); letter-spacing:.07em; margin-bottom:11px}
.steps b{display:block; font-size:15px; letter-spacing:-.015em; line-height:1.5}
.steps span{display:block; color:var(--muted); font-size:13.5px; margin-top:6px; line-height:1.7}

/* ミッション文 */
.mission{font-size:clamp(26px,3.6vw,44px); font-weight:700; letter-spacing:-.042em;
  line-height:1.4; margin:0 0 32px; text-wrap:balance}
.mission b{color:var(--fg)}
.mnote{color:var(--fg-2); font-size:15px; line-height:1.9; max-width:44em; margin:0 0 22px}
.mnote b{color:var(--fg); font-weight:600}

/* ---------------- 本文の部品 ---------------- */
.key{background:var(--ground); box-shadow:var(--ring); border-radius:var(--r);
  padding:24px 28px; margin:26px 0; font-size:15px; line-height:1.9; color:var(--fg-2);
  letter-spacing:.002em}
.key b{color:var(--fg); font-weight:600}
.note,.fhint{color:var(--muted); font-size:13.5px; line-height:1.8}
.todo,.empty{background:var(--ground); border-radius:var(--r); box-shadow:var(--ring);
  padding:34px 24px; color:var(--muted); text-align:center; font-size:14.5px}
.empty b{color:var(--fg)}
h2 .n{display:inline-block; min-width:22px; margin-right:11px; font-size:12.5px;
  font-weight:600; color:var(--faint); letter-spacing:.04em}
p.big{font-size:16px; line-height:1.9; color:var(--fg-2); max-width:46em}
p.big b{color:var(--fg)}

/* ---------------- 絞り込み ---------------- */
.ctrl{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin:26px 0 14px}
.ctrl input[type=search]{flex:1; min-width:230px; font-family:var(--sans); font-size:14.5px;
  padding:11px 14px; border:0; border-radius:var(--r-s); background:var(--card);
  box-shadow:var(--ring); color:var(--fg)}
.ctrl input[type=search]:focus{outline:0; box-shadow:inset 0 0 0 1.5px var(--accent)}
.hit{font-size:13px; color:var(--muted); white-space:nowrap}
.hit b{color:var(--fg); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:7px 0}
.chips .lbl{font-size:12px; color:var(--faint); min-width:46px; letter-spacing:.02em}
.chip{background:var(--card); border:0; box-shadow:var(--ring); border-radius:999px;
  padding:6px 14px; font-family:var(--sans); font-size:13px; color:var(--muted);
  cursor:pointer; transition:.13s}
.chip:hover{color:var(--fg); box-shadow:var(--ring-hi)}
.chip.on{background:var(--fg); color:var(--on-fg); box-shadow:none; font-weight:500}

/* ---------------- 求人カード ---------------- */
.jlist{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.jcard{background:var(--card); border-radius:var(--r); box-shadow:var(--ring);
  padding:24px 26px; transition:.14s}
.jcard:hover{box-shadow:var(--ring-hi)}
.jhead{display:flex; align-items:flex-start; gap:14px; justify-content:space-between}
.jtitle{font-size:17.5px; letter-spacing:-.022em; margin:0; flex:1}
.jtitle a{color:var(--fg)}
.jtitle a:hover{color:var(--accent); text-decoration:none}
.jkind{flex:none; font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:4px 11px;
  border-radius:999px; color:var(--muted); box-shadow:var(--ring); white-space:nowrap}
.jkind-専任型{color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-ring)}
.jkind-副業型{color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok-ring)}
.jsum{margin:10px 0 16px; color:var(--fg-2); font-size:14.5px; max-width:52em}
.jmeta{display:flex; gap:24px; flex-wrap:wrap; align-items:baseline; padding:14px 0;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.jpay{color:var(--pay); font-weight:600; font-size:16px; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
.jplace,.jremote{font-size:13px; color:var(--muted)}
.jtags{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0}
.jtags li{font-size:11.5px; color:var(--muted); background:var(--ground);
  border-radius:5px; padding:3px 9px}
.jtags li:first-child{color:var(--accent); background:var(--accent-soft); font-weight:500}
.jfoot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px}
.jdate{font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums}
.jbtn{font-size:13.5px; font-weight:600; color:var(--fg); padding:9px 18px;
  border-radius:var(--r-s); box-shadow:var(--ring-hi); white-space:nowrap; transition:.13s}
.jbtn:hover{background:var(--fg); color:var(--on-fg); text-decoration:none; box-shadow:none}
.star{flex:none; background:none; border:0; box-shadow:var(--ring); border-radius:var(--r-s);
  width:32px; height:32px; font-size:15px; line-height:1; color:var(--faint);
  cursor:pointer; transition:.13s}
.star:hover{color:var(--pay); box-shadow:var(--ring-hi)}
.star.on{color:var(--pay); box-shadow:inset 0 0 0 1px var(--pay-ring)}

/* ---------------- 求人の詳細 ---------------- */
.crumb{margin:26px 0 0; font-size:13.5px}
.crumb a{color:var(--muted); font-weight:500}
.jdetail{padding:22px 0 4px; border-bottom:1px solid var(--line); margin-bottom:8px}
.jtitle.big{font-size:clamp(24px,3.4vw,34px); letter-spacing:-.034em; line-height:1.22}
.jdetail .jtags{margin:16px 0 4px}
.jdetail .jmeta{margin-top:18px; border-bottom:0; padding-bottom:22px}
.jdetail .jpay{font-size:22px}
.ticks{list-style:none; margin:12px 0 20px; padding:0}
.ticks li{position:relative; padding:13px 0 13px 26px; border-top:1px solid var(--line-2);
  font-size:15px; color:var(--fg-2)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:""; position:absolute; left:3px; top:22px; width:6px; height:6px;
  border-radius:50%; background:var(--accent)}
.jlist.small{margin-top:12px; gap:10px}
.jcard.mini{padding:0}
.jcard.mini a{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:17px 22px; color:var(--fg)}
.jcard.mini a:hover{text-decoration:none; background:var(--ground); border-radius:var(--r)}
.jcard.mini b{font-size:15px; flex:1; min-width:210px; letter-spacing:-.015em}
.jcard.mini .jpay{font-size:14px}

/* ---------------- 表 ---------------- */
.tw{overflow-x:auto; margin:16px 0 22px; border-radius:var(--r); box-shadow:var(--ring)}
.tw table{width:100%; border-collapse:collapse; background:var(--card); font-size:14.5px}
.tw th{background:var(--ground); text-align:left; padding:13px 18px; font-weight:600;
  font-size:12.5px; letter-spacing:.02em; color:var(--muted);
  border-bottom:1px solid var(--line); white-space:nowrap}
.tw td{padding:14px 18px; border-bottom:1px solid var(--line-2); vertical-align:top;
  color:var(--fg-2); line-height:1.75}
.tw tr:last-child td{border-bottom:0}
.tw td b{color:var(--fg)}
.tw td.num{text-align:center; color:var(--faint); width:48px; font-variant-numeric:tabular-nums}

/* ---------------- 登録フォーム ---------------- */
.matchbar{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  background:var(--card); box-shadow:var(--ring); border-radius:var(--r);
  padding:16px 22px; margin:22px 0 10px; font-size:14px; color:var(--muted);
  position:sticky; top:62px; z-index:20}
.matchbar b{color:var(--fg); font-size:23px; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.matchbar .mlink{margin-left:auto; font-size:13.5px; font-weight:600}
/* ============================================================== 会員登録だけの枠なしのページ（2026-09-23）
   📌 根拠：2026-09-23 本人「限りなく情報を減らしている。何をすればいいのかが分かりやすい。
     会員登録などの文言も中央のページに集中させている。この構造を徹底的にパクって」
   クラウドワークスの会員登録の画面と同じ作り：中央のロゴ／白いカード1つ／下に「ログインはこちら」／小さな足元だけ。
   旧：.signup（サイトの枠の中に小さいカードを置いていた） */
.onlybody{background:var(--ground); min-height:100vh; display:flex; flex-direction:column}
.onlymain{flex:1; padding:40px 16px 8px}
.onlybrand{display:flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; font-size:19px; color:var(--fg); text-decoration:none; margin:0 auto 26px}
.onlybrand .mark{display:inline-flex; width:22px; height:22px; color:var(--accent); flex:none}
.onlybrand .mark svg{width:22px; height:22px}
.onlymain .wrap{max-width:390px; margin:0 auto; padding:0}
.onlymain.wide .wrap{max-width:760px}

.onlycard{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:30px 28px 24px}
.onlycard h1{font-size:20px; font-weight:700; text-align:center; margin:0 0 22px; letter-spacing:0}
.onlycard form{margin:0}
.onlylb{display:block; font-size:13px; font-weight:700; color:var(--fg-2); margin:16px 0 7px}
.onlylb:first-of-type{margin-top:0}
.onlycard input:not([type=checkbox]):not([type=hidden]):not([hidden]){
  display:block; width:100%; box-sizing:border-box; font:inherit; font-size:15px;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--bg); color:var(--fg)}
.onlycard input:focus{outline:2px solid var(--accent); outline-offset:1px}
.onlycard .onlyhint{margin:7px 0 0; font-size:12.5px; text-align:right}
.onlybtn{display:block; width:100%; margin:20px 0 0; text-align:center}
.onlycard .fhint{margin:9px 0 0; text-align:center}
.onlynote{margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.5px; line-height:1.7; color:var(--muted); text-align:center}
.onlylogin{text-align:center; margin:22px 0 0; font-size:14px}
/* 仮登録の画面（クラウドワークスの2枚目と同じ並び）。2026-09-23 */
.onlysent{max-width:700px; margin:0 auto; text-align:center; padding:34px 30px 28px}
.onlykicker{margin:0 0 14px; font-size:14px; font-weight:700; color:var(--fg); text-align:center}
.onlysent h1{font-size:21px; color:var(--accent); margin:0 0 16px}
.onlymail{margin:0 0 16px; font-size:14.5px; font-weight:700; color:var(--fg)}
.onlyicon{width:34px; height:34px; color:var(--fg); margin:0 auto 18px; display:block}
.onlybig{margin:0 0 6px; font-size:15px; font-weight:700; color:var(--fg)}
.onlysub{margin:0; font-size:14px; color:var(--fg-2)}
.onlyrule{border:0; border-top:1px solid var(--line); margin:26px 0 20px}
.onlyfine{margin:0 0 14px; font-size:12.5px; line-height:1.8; color:var(--muted); text-align:left}
.onlyfine:last-child{margin-bottom:0}
.onlylead{margin:-8px 0 20px; font-size:13.5px; line-height:1.7; color:var(--fg-2); text-align:center}
.onlyhint2{margin:7px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted)}
.onlycard textarea{display:block; width:100%; box-sizing:border-box; font:inherit; font-size:15px;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-s);
  background:var(--bg); color:var(--fg); resize:vertical}
.onlycheck,.onlykeep{display:flex; gap:9px; align-items:flex-start; margin:18px 0 0;
  font-size:12.5px; line-height:1.7; color:var(--fg-2)}
.onlykeep{justify-content:center; margin:14px 0 0}
.onlycheck input,.onlykeep input{margin:3px 0 0; flex:none}

.onlyfoot{padding:28px 16px 34px; text-align:center; font-size:12.5px; color:var(--muted)}
.onlyfoot nav{display:flex; flex-wrap:wrap; justify-content:center; gap:0 14px; margin-bottom:8px}
.onlyfoot nav a{color:var(--fg-2)}
.onlyfoot p{margin:0}
@media (max-width:420px){ .onlymain{padding-top:26px} .onlycard{padding:24px 18px 20px} }

.rform{margin:8px 0 46px}
.rform h2{font-size:19px; margin:38px 0 8px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:12px 0}
.rform label{display:block; font-size:13px; font-weight:600; color:var(--fg-2);
  letter-spacing:.005em}
.rform label.wide{margin:14px 0}
.rform input[type=text],.rform input[type=email],.rform input[type=url],
.rform select,.rform textarea{
  display:block; width:100%; margin-top:7px; font-family:var(--sans); font-size:15px;
  padding:12px 14px; border:0; border-radius:var(--r-s); background:var(--card);
  box-shadow:var(--ring); color:var(--fg); font-weight:400}
.rform input:focus,.rform select:focus,.rform textarea:focus{
  outline:0; box-shadow:inset 0 0 0 1.5px var(--accent)}
.rform textarea{resize:vertical; line-height:1.7}
.req{display:inline-block; font-size:10.5px; font-weight:600; color:var(--pay);
  letter-spacing:.04em; margin-left:6px; vertical-align:1px}
.picks{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px}
.pick{position:relative}
.pick input{position:absolute; opacity:0; width:0; height:0}
.pick span{display:inline-block; background:var(--card); box-shadow:var(--ring);
  border-radius:999px; padding:9px 17px; font-size:13.5px; color:var(--fg-2);
  cursor:pointer; transition:.13s; font-weight:400}
.pick span:hover{box-shadow:var(--ring-hi)}
.pick input:checked + span{background:var(--fg); color:var(--on-fg); box-shadow:none; font-weight:500}
.check{display:flex; align-items:flex-start; gap:12px; background:var(--ground);
  box-shadow:var(--ring); border-radius:var(--r); padding:16px 20px; margin:16px 0; cursor:pointer}
.check input{width:17px; height:17px; margin-top:3px; accent-color:var(--accent); flex:none}
.check span{font-weight:500; color:var(--ink)}
.fsend{text-align:center; margin:38px 0 0; padding-top:30px; border-top:1px solid var(--line)}
.fsend button.cta{border:0; cursor:pointer; font-family:var(--sans); font-size:15.5px;
  padding:15px 40px}

/* 登録ページ：見せ方の小見出し */
.sub-h{font-size:15.5px; letter-spacing:-.015em; margin:26px 0 4px; color:var(--fg)}
.sub-h + .fhint{margin-top:0}

/* ---------------- マイページ ---------------- */
.statusline{display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  background:var(--card); box-shadow:var(--ring); border-radius:var(--r);
  padding:16px 20px; margin:22px 0 6px}
.statusline .lbl{font-size:12px; color:var(--faint); white-space:nowrap; letter-spacing:.02em}
.track{list-style:none; display:flex; flex-wrap:wrap; gap:22px; margin:0; padding:0; flex:1}
.track li{position:relative; font-size:13px; color:var(--faint); padding-left:17px}
.track li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px;
  border-radius:50%; box-shadow:inset 0 0 0 1px var(--faint)}
.track li.on{color:var(--fg); font-weight:500}
.track li.on::before{background:var(--accent); box-shadow:none}
.tabs{display:flex; gap:24px; margin:26px 0 0; border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  padding:0 0 13px; font-family:var(--sans); font-size:14.5px; font-weight:500;
  color:var(--muted); cursor:pointer; white-space:nowrap; transition:.13s}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--fg); border-bottom-color:var(--fg); font-weight:600}
.pane{display:none; padding-top:22px}
.pane.on{display:block}
.pane h2{font-size:17px}
.mlink{font-weight:600}

/* ---------------- 下 ---------------- */
footer{background:var(--ground); border-top:1px solid var(--line); padding:40px 0 44px}
.flinks{list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px; margin:0 0 22px; padding:0}
.flinks a{font-size:13.5px; color:var(--fg-2); font-weight:500}
.flinks a:hover{color:var(--accent)}
footer p{margin:0; color:var(--muted); font-size:13px}
footer p b{color:var(--fg); font-weight:600; letter-spacing:-.01em}
.fmeta{margin:7px 0 0 !important; font-size:12.5px; color:var(--faint) !important}

@media (max-height:760px){
  .hero{min-height:auto; padding:56px 0 44px}
  /* 背の低い画面。スマホも縦760px未満なのでここに入る → 最小はスマホのお手本（34〜38px）に合わせて36px
     旧: .hero h1{clamp(30px,5.0vw,58px)} → 2026-09-11 clamp(32px,…) で出したらスマホが32pxだった */
  .hero .wrap > h1{font-size:clamp(36px,4.4vw,56px)}
  .hlead .deck{font-size:18.5px}
}
@media (max-width:820px){
  .secgrid{grid-template-columns:1fr; gap:26px}
  .hero{padding-top:52px}
  .band{padding:52px 0}
  .statstrip li{flex:1 1 46%; padding:18px 18px 20px 0}
  .statstrip li:nth-child(2n){border-right:0}
}
@media (max-width:640px){
  .hero .hbtns{justify-content:flex-start}
  /* 旧 .wrap{padding:0 18px}。左右は --pad-side（22px）にそろえた */
  .sitebar .wrap{gap:10px}
  .frow{grid-template-columns:1fr}
  .matchbar{position:static}
  .jhead{flex-wrap:wrap}
  .jfoot{flex-direction:column; align-items:stretch; gap:10px}
  .jbtn{text-align:center}
  .plist > li{grid-template-columns:1fr; gap:8px}
  .plist .pn{padding-top:0}
  .tabs{gap:18px}
}


@media (max-width:640px){
  .hlead .deck{font-size:17.5px}
  .hlead .deck br,.hlead .sub br{display:none}
  .hlead .sub{padding-left:14px}
}

/* スマホの画面上部（2026-09-11）：2段にする。1段目＝ロゴと「無料で登録」、2段目＝入口（入りきらなければ横に送れる）
   旧：1段のまま → 入口（働きたい方・企業の方）が幅0に押しつぶされて見えず、「無料で登録」も右に66pxはみ出していた
   📌 お手本：クラウドワークス・ランサーズはスマホでも「誰向けか」の入口を上部に出している（2026-09-11 実測） */
.sitebar nav.main li.sp{display:none}
@media (max-width:640px){
  .sitebar .wrap{flex-wrap:wrap; height:auto; column-gap:10px; row-gap:0; padding-top:10px}
  .sitebar .mylink,.sitebar .langsw{display:none}
  .sitebar .navcta{margin-left:auto}
  /* 2段目は画面の端から端まで使う（左右の余白ぶん狭いと、iPhone 13 で右端の English が切れた） */
  .sitebar nav.main{order:3; flex:0 0 calc(100% + 2 * var(--pad-side)); min-width:0; margin:0 calc(-1 * var(--pad-side))}
  .sitebar nav.main ol{padding:0 var(--pad-side)}
  .sitebar nav.main li.sp{display:block}
  .sitebar nav.main a{padding:8px 8px 10px; font-size:13px}
  .sitebar nav.main li:first-child a{padding-left:0}
}

/* ---------------- スクロールで現れる（ホームのみ） ---------------- */
/* js-reveal は index のスクリプトが付ける。JSが無ければ何も隠れない */
.js-reveal .rv{opacity:0; transform:translateY(18px);
  transition:opacity .68s cubic-bezier(.22,.61,.36,1),
             transform .68s cubic-bezier(.22,.61,.36,1)}
.js-reveal .rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1 !important; transform:none !important; transition:none !important}
}

/* ---------------------------------------------------------------- 完了の知らせ（2026-09-10）
   操作のあとに必ず1枚出す。クラウドワークスと同じで、「送れたのか分からない」を消すため */
.ovl{position:fixed; inset:0; z-index:60; padding:24px;
  background:var(--scrim); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center}
.ovl[hidden]{display:none}
.mcard{position:relative; width:100%; max-width:460px; background:var(--card);
  border-radius:var(--r); padding:30px 28px 26px;
  box-shadow:var(--ring), 0 28px 70px var(--shadow);
  animation:mpop .22s cubic-bezier(.2,.8,.3,1) both}
@keyframes mpop{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
.mcard .tick{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--ok); color:var(--on-fg); font-size:21px; line-height:1; margin-bottom:15px}
.mcard h3{font-size:19.5px; letter-spacing:-.012em; margin:0 0 9px; color:var(--fg)}
.mcard > p{font-size:14px; color:var(--fg-2); line-height:1.8; margin:0 0 15px}
.mcard ol{margin:0 0 19px; padding-left:19px; font-size:13.5px; color:var(--fg-2); line-height:1.85}
.mcard ol li{margin:0 0 5px}
.mcard ol li b{color:var(--fg)}
.mbtns{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.mbtns .cta{font-size:14px; padding:11px 18px}
.mx{position:absolute; top:12px; right:14px; border:0; background:none; cursor:pointer;
  font-size:21px; line-height:1; color:var(--faint); padding:4px 6px}
.mx:hover{color:var(--fg)}

/* 小さい知らせ。☆の保存など、画面を止めなくていいもの */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:70;
  background:var(--fg); color:var(--on-fg); font-size:13.5px; font-weight:500;
  padding:11px 18px; border-radius:999px; box-shadow:0 12px 34px var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* 使えるカードのブランド。ロゴ画像は使わず、文字だけで示す（2026-09-10） */
.cards{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; padding:0}
.cards b{font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--fg-2);
  background:var(--card); box-shadow:var(--ring); border-radius:var(--r-s); padding:8px 12px}

/* 機械よけの隠し欄。.rform input の display:block が hidden に勝ってしまうので打ち消す
   （2026-09-10：登録ページの「あなたのこと」の上に空欄が出ていた） */
.rform [hidden]{display:none !important}

/* 足りない欄を赤くする（2026-09-10）。ブラウザ任せの吹き出しは見落とされる */
.rform label.bad > input, .rform label.bad > select, .rform label.bad > textarea{
  box-shadow:inset 0 0 0 1.5px var(--err); background:var(--err-soft)}
.rform label.bad{color:var(--err)}
.fhint.err{color:var(--err); font-weight:600}
.opt{display:inline-block; font-size:10.5px; font-weight:600; color:var(--faint);
  letter-spacing:.04em; margin-left:6px; vertical-align:1px}

/* 選択群が空のとき（2026-09-10） */
.picks.bad{box-shadow:inset 0 0 0 1.5px var(--err); background:var(--err-soft);
  border-radius:var(--r-s); padding:10px}
h2.bad{color:var(--err)}

/* 「任意」に重ねる小さな説明。触れたときだけ浮かぶ */
.tip{position:relative; cursor:help; outline:0}
.tip::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(3px); background:var(--fg); color:var(--on-fg);
  font-size:12px; font-weight:500; letter-spacing:0; white-space:nowrap;
  padding:8px 12px; border-radius:6px; box-shadow:0 10px 26px var(--shadow-soft);
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s; z-index:20}
.tip::before{content:""; position:absolute; left:50%; bottom:calc(100% + 4px);
  transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--fg);
  opacity:0; transition:opacity .16s}
.tip:hover::after,.tip:focus::after{opacity:1; transform:translateX(-50%) translateY(0)}
.tip:hover::before,.tip:focus::before{opacity:1}

/* 段取りの帯（2026-09-10・作り直し2）
   ・見出しから離す。目次なので、まわりの文より強く出す
   ・済んだ段は ✓ にして、押すと戻れる
   ・段と段を線でつなぎ、進み具合を見せる
   ・押せない段はボタンに見せない */
.stepsnav{display:flex; align-items:center; list-style:none;
  margin:34px 0 42px; padding:20px 2px; flex-wrap:wrap; row-gap:12px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.stepsnav li{display:flex; align-items:center; gap:11px;
  font-size:15px; font-weight:700; letter-spacing:-.004em; color:var(--faint)}
.stepsnav li::after{content:""; width:clamp(30px,9vw,120px); height:1px;
  background:var(--line); margin:0 18px; flex:none}
.stepsnav li:last-child::after{display:none}
.stepsnav .dot{display:grid; place-items:center; width:29px; height:29px; border-radius:50%;
  background:var(--card); box-shadow:inset 0 0 0 1.5px var(--line);
  color:var(--faint); font-size:13.5px; font-weight:700; flex:none}
.stepsnav .now{color:var(--fg)}
.stepsnav .now .dot{background:var(--fg); color:var(--bg); box-shadow:none}   /* 2026-09-17（夕）色は変数だけ。旧 color:#fff */
.stepsnav .done{color:var(--fg-2)}
.stepsnav .done .dot{background:var(--ok); color:var(--bg); box-shadow:none; font-size:15px}
.stepsnav .done::after{background:var(--ok)}
.stepsnav a{display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none}
.stepsnav a:hover .lb{color:var(--accent); text-decoration:underline}
.stepsnav a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
/* 依頼の3段（2026-09-17 夕）。JSが無いときは3段が上から並ぶので、段と段の間をあける */
.ostep + .ostep{margin-top:48px; padding-top:8px; border-top:1px solid var(--line)}
.ostep[hidden]{display:none}
.ostates-box{margin:16px 0 22px; padding:12px 16px; background:var(--ground); border-radius:var(--r); box-shadow:var(--ring)}
.ostates-h{margin:0 0 4px; font-size:13.5px; color:var(--muted)}
.ostates{display:flex; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none;
  font-size:14px; font-weight:600; color:var(--fg); row-gap:2px}
.ostates li{white-space:nowrap}
.ostates li + li::before{content:"\2192"; margin:0 8px; color:var(--faint); font-weight:400}
@media(max-width:560px){
  .stepsnav{font-size:13.5px; margin:26px 0 32px; padding:16px 2px}
  .stepsnav li{font-size:13.5px; gap:9px}
  .stepsnav li::after{margin:0 10px}
  .stepsnav .dot{width:25px; height:25px; font-size:12px}
}

/* メッセージの頭。左に状態、右に自動翻訳の切り替え（2026-09-10） */
.panehead{display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin:0 0 16px}
.panehead .fhint{margin:0}
.tgl{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none;
  font-size:13px; font-weight:600; color:var(--fg-2)}
.tgl input{position:absolute; opacity:0; width:1px; height:1px}
.tglui{width:38px; height:22px; border-radius:999px; background:var(--line);
  position:relative; transition:background .18s; flex:none}
.tglui::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:var(--card); box-shadow:0 1px 3px var(--shadow-soft);
  transition:transform .18s}
.tgl input:checked + .tglui{background:var(--ok)}
.tgl input:checked + .tglui::after{transform:translateX(16px)}
.tgl input:focus-visible + .tglui{outline:2px solid var(--accent); outline-offset:2px}

/* 並んだ細いリンクは1本につながって見えるので、間に線を入れて分ける（2026-09-10） */
.fhint .mlink{display:inline-block}
.fhint .mlink + .mlink{margin-left:20px; padding-left:20px; border-left:1px solid var(--line)}
.faint{color:var(--faint)}

/* 確認の面。送る前に、何を送るかを必ず見せる */
#review .fsend{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
#review .fsend .fhint{width:100%; margin:6px 0 0}
#review table td:first-child{white-space:nowrap; color:var(--fg-2); font-weight:600}

/* ページ送り（2026-09-10）。件数が増えたので分ける */
.pager{display:flex; gap:7px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin:30px 0 6px}
.pager button{min-width:38px; height:38px; padding:0 12px; border:0; cursor:pointer;
  background:var(--card); box-shadow:var(--ring); border-radius:var(--r-s);
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--fg-2)}
.pager button:hover:not(:disabled){box-shadow:var(--ring-hi); color:var(--fg)}
.pager button.on{background:var(--fg); color:var(--on-fg); box-shadow:none}
.pager button:disabled{color:var(--faint); cursor:default; opacity:.55}
/* ページの頭に置く説明（2026-09-10・作り直し2）
   左に見出し、右に本文の2段組。ホームの各節と同じ骨格をそのまま使う。
   1段で書くと、右側が空いて左に寄って見える。2段にすると横に埋まる */
.pageintro{margin:36px 0 46px; padding:34px 38px;
  background:var(--ground); box-shadow:var(--ring); border-radius:var(--r)}
.pageintro .secgrid{gap:44px; align-items:start}
.pageintro .sechead h2{font-size:21px; letter-spacing:-.026em; margin:0}
.pageintro .eyebrow{margin:0 0 12px}
.pi-body{margin:0; font-size:16.5px; line-height:1.95;
  color:var(--fg); font-weight:400; letter-spacing:-.005em}
@media(max-width:900px){
  .pageintro{padding:26px 24px; margin:28px 0 36px}
  .pageintro .secgrid{gap:20px}
  .pageintro .sechead h2{font-size:19px}
  .pi-body{font-size:15.5px; line-height:1.9}
}

/* ============================================================
   ミッションページの寸法（2026-09-10・8ptグリッド）
   余白は8の倍数、行の高さは4の倍数、1行は25〜40字
   ============================================================ */

/* --- 目次 --------------------------------------------------- */
.toc{display:flex; flex-wrap:nowrap; overflow-x:auto; margin:32px 0 0; padding:0;
  position:sticky; top:62px; z-index:20;
  background:var(--bar-bg); backdrop-filter:saturate(1.6) blur(10px);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc a{display:flex; align-items:baseline; gap:12px;
  padding:24px 40px 24px 0; color:var(--fg-2); text-decoration:none;
  font-size:15px; line-height:24px; font-weight:600; letter-spacing:-.01em}
.toc a b{font-size:12px; line-height:16px; font-weight:700;
  color:var(--faint); letter-spacing:.06em}
.toc a:hover,.toc a:hover b{color:var(--accent)}
.toc a{white-space:nowrap; flex:none; transition:color .18s}
.toc a.on,.toc a.on b{color:var(--accent)}

/* --- 節 ----------------------------------------------------- */
.sec{padding:160px 0 0; scroll-margin-top:152px; min-height:76vh}
.sec:first-of-type{padding-top:96px; min-height:64vh}
.sec .eyebrow{margin:0 0 32px; font-size:16px; line-height:24px; font-weight:700;
  letter-spacing:.14em; color:var(--fg-2)}
/* 下に来る文字が大きいほど、空ける量も増やす（光学的に揃える） */
#mission .eyebrow{margin-bottom:56px}
#root .eyebrow{margin-bottom:32px}
.sec .eyebrow::before{width:40px; background:var(--fg-2)}
.sec h2{margin:0 0 40px; font-size:34px; line-height:48px;
  letter-spacing:-.03em; color:var(--fg)}
.sec p{letter-spacing:.01em}

/* --- ミッションの一文（このページで一番大きい） ------------- */
.sec .mission{margin:0; font-weight:400;
  font-size:88px; line-height:120px; letter-spacing:-.05em; color:var(--fg);
  max-width:13em}
.sec .mission b{font-weight:700}

/* --- 節のはじめの一文 --------------------------------------- */
.sec .big{margin:0; font-size:20px; line-height:36px;
  letter-spacing:.01em; color:var(--fg-2); max-width:34em}

/* --- 根にあるもの：太い一文 --------------------------------- */
.statement{margin:0 0 40px; font-weight:400;
  font-size:40px; line-height:56px; letter-spacing:-.036em;
  color:var(--fg); max-width:18em}
.statement b{font-weight:700}

/* --- 数字を3つ並べる ---------------------------------------- */
.figs{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:64px; margin:72px 0 0}
.sec .fig{margin:0 0 24px; font-weight:600;
  font-size:56px; line-height:64px; letter-spacing:-.04em; color:var(--fg);
  font-variant-numeric:tabular-nums}
.sec .fig em{display:block; margin:16px 0 0; font-style:normal;
  font-size:15px; line-height:28px; font-weight:500;
  letter-spacing:.01em; color:var(--muted); max-width:28em}
.figs > div > p:last-child{margin:0; font-size:17px; line-height:32px;
  letter-spacing:.01em; color:var(--fg-2); max-width:32em}

/* --- 大事にすること ----------------------------------------- */
.values{list-style:none; margin:48px 0 0; padding:0; border-top:1px solid var(--line)}
.values li{display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:40px;
  padding:32px 0; border-bottom:1px solid var(--line);
  font-size:17px; line-height:32px; letter-spacing:.01em; color:var(--fg-2)}
.values li b{font-size:20px; line-height:32px; font-weight:700;
  letter-spacing:-.022em; color:var(--fg)}

/* --- 本文の段落（節の中） ----------------------------------- */
.sec > p:not(.eyebrow):not(.big):not(.statement):not(.mission){
  margin:32px 0 0; font-size:17px; line-height:32px;
  letter-spacing:.01em; color:var(--fg-2); max-width:34em}

/* --- 末尾のカード ------------------------------------------- */
.cardlinks{display:grid; grid-template-columns:repeat(auto-fit,minmax(256px,1fr));
  gap:24px; margin:160px 0 48px}
.cardlinks a{display:block; padding:32px; background:var(--card);
  box-shadow:var(--ring); border-radius:var(--r);
  text-decoration:none; transition:box-shadow .16s}
.cardlinks a:hover{box-shadow:var(--ring-hi)}
.cardlinks a b{display:block; margin:0 0 8px; color:var(--fg);
  font-size:20px; line-height:32px; font-weight:700; letter-spacing:-.02em}
.cardlinks a span{display:block; color:var(--muted);
  font-size:15px; line-height:28px; letter-spacing:.01em}

/* --- 狭い画面：段階を1つ落とす（8の倍数を保つ） ------------- */
@media(max-width:1024px){
  .sec{padding:112px 0 0; min-height:0}
  .sec:first-of-type{padding-top:72px; min-height:0}
  .sec h2{font-size:28px; line-height:40px; margin:0 0 32px}
  .sec .mission{font-size:56px; line-height:80px; letter-spacing:-.044em}
  .statement{font-size:30px; line-height:44px; margin:0 0 32px}
  .sec .fig{font-size:44px; line-height:56px}
  .cardlinks{margin:112px 0 40px}
}
@media(max-width:560px){
  .sec{padding:72px 0 0; scroll-margin-top:136px}
  .sec:first-of-type{padding-top:48px}
  .sec h2{font-size:22px; line-height:32px; margin:0 0 24px}
  .sec .eyebrow{font-size:14px; line-height:24px; letter-spacing:.12em; margin:0 0 24px}
  #mission .eyebrow{margin-bottom:32px}
  .sec .eyebrow::before{width:28px}
  .sec .mission{font-size:34px; line-height:52px; letter-spacing:-.036em}
  .statement{font-size:22px; line-height:36px; margin:0 0 24px}
  .sec .big{font-size:17px; line-height:32px}
  .sec .fig{font-size:34px; line-height:44px}
  .figs > div > p:last-child,.sec > p:not(.eyebrow):not(.big):not(.statement):not(.mission),
  .values li{font-size:15px; line-height:28px}
  .toc a{padding:16px 20px 16px 0; font-size:14px; line-height:24px}
  .values li{grid-template-columns:1fr; gap:4px; padding:24px 0}
  .figs{gap:48px; margin:48px 0 0}
  .cardlinks{margin:72px 0 32px; gap:16px}
}

/* ============================================================== ミッションの節をトップと同じ作りに（2026-09-24）
   📌 根拠：2026-09-24 本人「ホームページのような1つ1つの節の高さを調節」
   トップ（.homepage .band）と同じ数字：間104px・高さ min(82vh,760px)・中身を縦の中央に・色を交互に
   旧：上だけ160pxの余白で、高さは76vh。節が1本の白い帯に並んでいた（上の指定は消さずに残し、ここで上書き）
   .sec はミッションだけで使っている */
.sec{padding:104px 0; min-height:min(82vh, 760px);
  display:flex; flex-direction:column; justify-content:center}
.sec:first-of-type{padding-top:104px; min-height:min(82vh, 760px)}
/* 偶数の節だけ薄い青。枠（.wrap）の外まで色を伸ばす。横のスクロールは出ない */
.sec:nth-of-type(even){background:var(--ground);
  box-shadow:0 0 0 100vmax var(--ground); clip-path:inset(0 -100vmax)}
.sec > *{width:100%}
.cardlinks{margin:104px 0 48px}
@media (max-width:860px){
  .sec,.sec:first-of-type{padding:64px 0; min-height:0; display:block}
  .cardlinks{margin:64px 0 32px}
}

/* 開いた画面のど真ん中にミッションの一文（2026-09-24）
   📌 根拠：本人「開いたときに Mission／AI人材の流動性を高め AI時代を創る がちょうど真ん中に」「ドーンとくるように中央に」
   旧：上に「ミッション」の見出し・説明文・目次があり、一文はその下（build_work.py で見出しと目次を外した）
   高さ＝画面の高さ − 上のバー（PC 63px／スマホ 93px を実測） */
/* 2026-09-24 そろえ方は左。📌 根拠：本人の選択「左ぞろえ」。各社のミッション・会社紹介の最初の一文を実測し、左7社・中央3社（10社中）。
   ページのほかの節（線つきの MISSION と同じ形の小見出し）とも同じそろえ方になる
   旧：align-items:center; text-align:center（MISSION の左の線のせいで、左に重く見えた） */
#mission.sec{min-height:calc(100vh - 63px); min-height:calc(100svh - 63px);
  padding:48px 0; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  text-align:left}
#mission.sec > *{width:auto}   /* 上の「.sec > *{width:100%}」だと MISSION が左に寄る */
#mission .eyebrow{margin-bottom:40px}
/* スマホ（390px）でも「AI人材の流動性を高め」が1行に収まる大きさ（旧 clamp(40px,7.4vw,112px) は「高め」が次の行に落ちた） */
#mission .mission{margin:0; max-width:none;
  font-size:clamp(28px, 8.2vw, 104px); line-height:1.3; letter-spacing:-.05em}
/* 一文だけは、ゆっくり大きく現れる */
.js-reveal #mission .mission.rv{transform:translateY(24px) scale(.96);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1)}
.js-reveal #mission .mission.rv.in{transform:none}
@media (max-width:860px){
  #mission.sec{display:flex; min-height:calc(100vh - 93px); min-height:calc(100svh - 93px); padding:40px 0}
  #mission .eyebrow{margin-bottom:28px}
}
/* 2026-10-14 ビジョンの見出しも Mission の大見出しの型（.mission）で出す。大きさだけ、2行目（12字）が1行に収まる幅に合わせる
   📌 根拠：本人「上の問題定義に対して、やや弱い。もう少し大きめに」。旧：ふつうの節の見出し（.sec h2・34px） */
#vision .mission{max-width:none; font-size:clamp(24px, 7.2vw, 80px); line-height:1.3; letter-spacing:-.05em}
/* ============================================================== ミッションの節 ここまで */


/* t.php は骨組みを自前で書き出すので、見出しとリード文の指定を足す */
.wrap > h1{font-size:clamp(24px,3vw,34px); letter-spacing:-.032em; line-height:1.3;
  margin:0 0 16px; color:var(--fg)}
.wrap > .lead{color:var(--fg-2); font-size:16px; line-height:28px;
  letter-spacing:.01em; margin:0 0 28px; max-width:36em}

/* ============================================================
   マイページ（2026-09-10）左に案件、右にやり取り。クラウドワークスと同じ2枚組
   ============================================================ */
.mepage{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:0; align-items:stretch; padding:0; max-width:1240px;
  height:calc(100vh - 63px)}
.melist{border-right:1px solid var(--line); overflow-y:auto; padding:24px 0 40px}
.melist .eyebrow{margin:0 24px 16px}

.thlist{list-style:none; margin:0; padding:0}
.thlist li.none{padding:0 20px}
.thlist a{display:flex; gap:12px; align-items:flex-start; padding:16px 24px;
  text-decoration:none; border-left:3px solid transparent}
.thlist a:hover{background:var(--ground)}
.thlist li.on a{background:var(--ground); border-left-color:var(--fg)}
.av{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--ink); color:var(--on-fg); font-size:15px; font-weight:700; flex:none}
.thlist .tl{flex:1; min-width:0; display:block}
.thlist .tl b{display:block; color:var(--fg); font-size:14.5px; line-height:22px;
  font-weight:700; letter-spacing:-.012em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thlist .who{display:block; color:var(--muted); font-size:12.5px; line-height:20px}
.thlist .pv{display:block; color:var(--faint); font-size:12.5px; line-height:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.thlist .at{color:var(--faint); font-size:11.5px; line-height:22px; flex:none;
  font-variant-numeric:tabular-nums}

.mepanel{display:flex; flex-direction:column; min-height:0}
.thhead{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 28px; border-bottom:1px solid var(--line); flex:none; flex-wrap:wrap}
.thhead h2{margin:0; font-size:17px; line-height:24px; letter-spacing:-.02em; color:var(--fg)}
.thhead p{margin:2px 0 0; color:var(--muted); font-size:13px; line-height:20px}

.msgs{list-style:none; margin:0; padding:24px 28px; overflow-y:auto; flex:1; min-height:0}
.msgs li.none{padding:16px 0}
.msgs .sep{display:flex; align-items:center; gap:14px; margin:20px 0 18px;
  color:var(--faint); font-size:12px; letter-spacing:.04em}
.msgs .sep::before,.msgs .sep::after{content:""; flex:1; height:1px; background:var(--line)}
.msg{display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; max-width:80%}
.msg.mine{margin-left:auto; flex-direction:row-reverse}
.msg .av{width:32px; height:32px; font-size:13px; background:var(--muted)}
.msg.mine .av{background:var(--ink)}
.msg .bb{background:var(--card); box-shadow:var(--ring); border-radius:var(--r);
  padding:12px 16px; min-width:0}
.msg.mine .bb{background:var(--accent-soft); box-shadow:none}
.msghead{display:flex; align-items:baseline; gap:12px; margin:0 0 4px;
  font-size:12px; line-height:20px}
.msghead b{color:var(--fg-2); font-weight:700}
.msghead span{color:var(--faint); font-variant-numeric:tabular-nums}
.msgtext{margin:0; font-size:14.5px; line-height:26px; color:var(--fg); letter-spacing:.01em;
  overflow-wrap:anywhere}
.trmark{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
  background:var(--card); box-shadow:var(--ring); color:var(--muted);
  font-size:10.5px; font-weight:600; letter-spacing:.04em; vertical-align:2px}

.composer{display:flex; gap:12px; align-items:flex-end; flex:none;
  padding:16px 28px 20px; border-top:1px solid var(--line); background:var(--bg)}
.composer textarea{flex:1; resize:none; font-family:var(--sans); font-size:14.5px;
  line-height:26px; padding:12px 14px; border:0; border-radius:var(--r-s);
  background:var(--card); box-shadow:var(--ring); color:var(--fg)}
.composer textarea:focus{outline:0; box-shadow:inset 0 0 0 1.5px var(--accent)}
.composer button{border:0; cursor:pointer; font-family:var(--sans); flex:none;
  font-size:14.5px; padding:13px 24px}

.wrap code{font-size:12.5px; word-break:break-all; color:var(--fg)}

@media(max-width:820px){
  .mepage{grid-template-columns:1fr; height:auto}
  .melist{border-right:0; border-bottom:1px solid var(--line); max-height:280px; padding:20px 0}
  .msgs{max-height:none; overflow:visible; padding:20px 18px}
  .thhead,.composer{padding-left:var(--pad-side); padding-right:var(--pad-side)}
  .msg{max-width:100%}
  .composer{position:sticky; bottom:0}
}

/* 案件のページへの入口（2026-09-10） */
.mekey{margin:20px 0 0; padding:0 0 4px}
.mekey summary{cursor:pointer; color:var(--fg-2); font-size:13.5px; font-weight:600;
  padding:10px 0; list-style:none}
.mekey summary::-webkit-details-marker{display:none}
.mekey summary::before{content:"＋ "; color:var(--faint)}
.mekey[open] summary::before{content:"－ "}
.mekey summary:hover{color:var(--accent)}
.afterform2{margin-top:40px; padding-top:26px; border-top:1px solid var(--line);
  font-size:18px; letter-spacing:-.02em}

/* 案件の状態と、次にやること（2026-09-10・クラウドワークスの契約の流れに合わせる） */
.st{display:inline-block; font-style:normal; font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:2px 9px; border-radius:999px; vertical-align:2px;
  background:var(--line-2); color:var(--muted)}
.st.hired{background:var(--accent-soft); color:var(--accent)}
.st.paid{background:var(--ok-soft); color:var(--ok)}
.st.done{background:var(--fg); color:var(--on-fg)}
.thhead .st{margin-left:8px}

.badge{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px;
  margin-left:6px; border-radius:999px; background:var(--err); color:var(--on-fg);
  font-size:11px; font-weight:700; vertical-align:2px}

.actbar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin:0; padding:16px 28px;
  background:var(--ground); border-bottom:1px solid var(--line)}
.actbar div{min-width:0}
.actbar b{display:block; color:var(--fg); font-size:14.5px; line-height:22px; font-weight:700}
.actbar span{display:block; color:var(--muted); font-size:12.5px; line-height:20px}
.actbar .cta{flex:none; font-size:14px; padding:11px 20px; border:0; cursor:pointer;
  font-family:var(--sans)}

.msgs .note{margin:0 0 18px; text-align:center}
.msgs .note p{display:inline-block; margin:0; padding:10px 18px; border-radius:999px;
  background:var(--line-2); color:var(--muted); font-size:13px; line-height:22px;
  max-width:80%; text-align:left}
.msgs .note span{display:block; margin-top:4px; color:var(--faint); font-size:11px}

.sitebar .mlink{font-size:13.5px}

/* ============================================================
   自動マッチング（2026-09-11）企業には合う人、ワーカーには合う依頼
   ============================================================ */
.matchsec{margin:0 0 24px; scroll-margin-top:86px}   /* 2026-09-25 #applied などで開くと上の帯（高さ62px）に見出しが隠れていたため。旧：margin だけ */
@media (max-width:640px){ .matchsec{scroll-margin-top:210px} }   /* 2026-09-25 スマホは上の帯が2段で高さ186px（実測）のため */
.matchsec h3{font-size:15px; letter-spacing:-.01em; margin:0 0 10px; color:var(--fg)}
.mlist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.mlist li{border:1px solid var(--line); border-radius:var(--r-s); padding:12px 14px; background:var(--card);
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mlist .who{min-width:0; flex:1 1 260px}
.mlist .who b{display:block; color:var(--fg)}
.mlist .who span{display:block; color:var(--muted); font-size:13px; line-height:1.7}
.mlist .who .hit{color:var(--fg); font-weight:600}
.mlist form{margin:0}
/* 2026-09-17（夜）運営が渡した方ごとの押す所（声をかける・試し作業を開く）と、試し作業を頼む欄 */
.mlist .acts{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.mlist li details.hireform{flex:1 1 100%; margin:4px 0 0}
/* 重なった分野・スキルの太字（b.hit）は行の中に並べる（上の .who b の block が当たって1語ずつ改行していた） */
.mlist .who span b{display:inline}

/* 社内説明用の1枚を印刷するとき（2026-09-15）。枠と印刷ボタンを消して、A4 1枚に収める */
@media print{
  .sitebar, footer, .noprint{display:none !important}
  body{background:var(--print-bg); color:var(--print-fg)}
  header{padding:0 0 8px}
  h2{margin-top:14px}
}

/* ============================================================
   2026-09-17 ページごとの実装確認（01〜25）に合わせて足した部品
   色は :root の変数だけ。数字は等幅・右寄せ
   ============================================================ */
.jtake{font-size:13px; color:var(--fg-2); font-variant-numeric:tabular-nums}
.tw td.yen{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.fhint.center{text-align:center}
/* 押す所の真上の「やめなくていい」「2週間で終われる」 */
.stay{margin:26px 0 8px; color:var(--fg-2); font-size:14.5px; line-height:1.85}
.stay b{color:var(--fg)}
.fhint.conf{margin:14px 0 4px}
.fhint.conf b{color:var(--fg)}
/* 依頼の画面：金額を入れた瞬間に出る「働く方に届く額」 */
.payout{margin:2px 0 0; min-height:1.6em; font-size:16px; font-weight:600; color:var(--fg);
  font-variant-numeric:tabular-nums}
.calc{margin:8px 0 18px}
.calc label.wide{max-width:320px}
/* 登録：分野と得意なことは「あとから」 */
details.later{margin:22px 0 6px; padding:14px 20px; border-radius:var(--r); box-shadow:var(--ring);
  background:var(--card)}
details.later summary{cursor:pointer; font-weight:600; font-size:14.5px; color:var(--fg)}
details.later[open] summary{margin-bottom:6px}
/* 社内説明の1枚：いちばん上の1行 */
.op1{margin:26px 0 8px}

/* スマホの幅で横にはみ出さない（2026-09-17・design.spec の2）
   旧：入口の行は横に送る作り → 英語の入口（For companies・My page・日本語）が画面の外に出ていた。折り返す
   旧：ミッションの目次も横に送る作り → 狭い画面では折り返し、上に貼りつけない */
@media (max-width:640px){
  .sitebar nav.main ol{flex-wrap:wrap; overflow-x:visible; row-gap:0}
}
@media (max-width:560px){
  .toc{flex-wrap:wrap; overflow-x:visible; position:static}
  .toc a{padding:10px 16px 10px 0}
}

/* マイページと運営画面（2026-09-17・段3のつなぎ込み・17 mypage／19 mepane）。色は変数だけ */
.st.engaged{background:var(--accent-soft); color:var(--fg)}
.warn,.warn b,b.warn{color:var(--err)}
form.inline{display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0}
form.inline .check{padding:4px 8px; margin:0}
.linkbtn{background:none; border:0; padding:0; color:var(--accent); cursor:pointer; font:inherit; font-size:14px; text-decoration:underline}
.urlbox{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.urlbox input{flex:1; min-width:0; font:inherit; font-size:13.5px; padding:9px 12px; border:0; border-radius:var(--r-s);
  box-shadow:var(--ring); background:var(--card); color:var(--fg)}
pre.order{white-space:pre-wrap; font-family:var(--sans); font-size:13px; line-height:1.7; color:var(--fg-2);
  background:var(--ground); border-radius:var(--r-s); padding:10px 14px; margin:8px 0; max-height:260px; overflow:auto}
.msg .orig{margin:6px 0 0; font-size:12px}
.composerhint{margin:8px 24px 0}
details.meeting,details.hireform{margin:8px 0; padding:12px 18px; border-radius:var(--r); box-shadow:var(--ring); background:var(--card)}
details.meeting summary,details.hireform summary{cursor:pointer; color:var(--fg)}
details.hireform summary b{display:inline; margin-right:8px}
details.hireform summary span{display:block; color:var(--muted); font-size:12.5px}
/* 2026-09-17 旧：.actbar.trialend（契約の最初の試しの期間の終わり）→ その期間を外し、試し作業の後の「本契約へ進む」（.tomain）に */
.actbar.rating,.actbar.tomain{flex-wrap:wrap}
.moneytop .steps li{font-variant-numeric:tabular-nums}
ul.help li span{display:block; color:var(--muted); font-size:12.5px}
@media (max-width:640px){ .composerhint{margin:8px 18px 0} }

/* ============================================================
   2026-09-18 働きたい方・企業の方のページ群の作り直し（本人「ごちゃごちゃ」）
   お手本：クラウドワークス「発注したい方」（見出し＋ボタン → 3段の流れ → 選ばれる理由 → 料金 → よくある質問 → 最後のボタン）、
          Toptal（見出し＋ボタン → 3段の流れ → 理由 → よくある質問。ボタンは節の後に繰り返す）、
          Mercor・Upwork の受注者向け（点数 → 合う仕事 → 支払いの順に並べる）
   節に番号を付けない。表は必要な所だけ。色は変数だけ
   ============================================================ */
/* 表の縞 */
.tw tbody tr:nth-child(even) td{background:var(--stripe)}

/* ページ見出しの下の押す所（見出し1行・説明1文・ボタン1つ） */
header .hact{display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; margin:24px 0 0}
header .hact .cta{font-size:15.5px; padding:14px 30px}
header .hact .sublink{font-size:13.5px; color:var(--fg-sub); font-weight:500}
header .hact .sublink:hover{color:var(--accent)}

/* 節（番号なし）。見出し・1文・中身の順 */
.pgsec{margin:64px 0 0}
.pgsec:first-child{margin-top:40px}
.wrap .pgsec > h2{font-size:24px; letter-spacing:-.028em; margin:0 0 8px}
.pgsec > .sechint{color:var(--fg-sub); font-size:14.5px; margin:0 0 20px; max-width:44em}
.pgsec .cols{margin-top:18px}
.statstrip.compact{margin:36px 0 0; border-bottom:1px solid var(--line)}
.statstrip.compact li{padding:18px 20px 20px 20px}
.statstrip.compact li:first-child{padding-left:0}
.statstrip.compact b{font-size:24px}

/* 番号付きの流れ（3〜5段）。数字を大きく、段と段を矢印でつなぐ */
ol.flow{counter-reset:f; list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
ol.flow > li{counter-increment:f; position:relative; background:var(--card); box-shadow:var(--ring);
  border-radius:var(--r); padding:22px 22px 24px}
ol.flow > li::before{content:counter(f); display:grid; place-items:center; width:30px; height:30px;
  border-radius:50%; background:var(--fg); color:var(--on-fg); font-size:14px; font-weight:700; margin:0 0 14px;
  font-variant-numeric:tabular-nums}
ol.flow > li b{display:block; font-size:16px; letter-spacing:-.015em; line-height:1.5; color:var(--fg)}
ol.flow > li span{display:block; color:var(--fg-2); font-size:14px; line-height:1.8; margin-top:6px}
ol.flow > li em{display:block; font-style:normal; color:var(--fg-sub); font-size:12.5px; margin-top:10px}
.band.alt ol.flow > li{background:var(--card)}

/* 料金の2行 */
.pricebox{margin:18px 0 0; border-radius:var(--r); box-shadow:var(--ring); background:var(--card); overflow:hidden}
.pricebox > div{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:6px 24px; align-items:baseline;
  padding:18px 22px; border-top:1px solid var(--rule-thin)}
.pricebox > div:first-child{border-top:0}
.pricebox dt,.pricebox .pk{font-size:14px; color:var(--fg-2); font-weight:600}
.pricebox .pv{font-size:15px; color:var(--fg-2)}
.pricebox .pv b{font-size:22px; letter-spacing:-.02em; color:var(--fg); font-variant-numeric:tabular-nums; margin-right:8px}
.pgsec .more{margin:12px 0 0; font-size:14px}

/* よくある質問（開くと中身が出る） */
.faq{margin:18px 0 0; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; position:relative; padding:18px 40px 18px 0;
  font-size:15.5px; font-weight:600; color:var(--fg); letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:14px; font-size:22px; font-weight:400; color:var(--fg-sub)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.faq .fa{padding:0 0 20px; color:var(--fg-2); font-size:14.5px; line-height:1.85; max-width:48em}
.faq .fa p{margin:0 0 8px}
.faq .fa ul{margin:4px 0 8px; padding-left:20px}

/* 最後の押す所 */
.endcta{margin:72px 0 56px; padding:40px 28px; text-align:center; background:var(--ground);
  border-radius:var(--r); box-shadow:var(--ring)}
.wrap .endcta h2{margin:0 0 8px; font-size:22px}
.endcta p{margin:0 0 22px; color:var(--fg-2)}
.endcta p.hbtns{margin:0; justify-content:center}

/* 相場と仕事の例の区切り（仕事の例と相場） */
.listsec{margin:72px 0 0; padding:44px 0 0; border-top:2px solid var(--fg)}
.wrap .listsec > h2{margin:0 0 6px; font-size:24px}
.listsec > .sechint{color:var(--fg-sub); font-size:14.5px; margin:0}
.nextbox{margin:40px 0 0; padding:28px 26px; border-radius:var(--r); box-shadow:var(--ring); background:var(--ground)}
.wrap .nextbox > h2{margin:0 0 4px; font-size:20px}
.nextbox .fsend{border-top:0; padding-top:0; margin-top:26px}

/* 依頼の画面：任意の欄はたたむ */
details.more-fields{margin:26px 0 6px; padding:14px 20px; border-radius:var(--r); box-shadow:var(--ring); background:var(--card)}
details.more-fields > summary{cursor:pointer; font-weight:600; font-size:14.5px; color:var(--fg)}
details.more-fields[open] > summary{margin-bottom:6px}
.aiask{margin:14px 0 4px; padding:14px 18px; border-radius:var(--r); background:var(--accent-soft)}
.aiask[hidden]{display:none}
.aiask p{margin:0 0 6px; font-size:13.5px; font-weight:600; color:var(--fg)}
.aiask ul{margin:0; padding-left:20px; font-size:14px; color:var(--fg-2); line-height:1.8}

/* 足元：4つの列 */
.fcols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 32px; margin:0 0 30px}
footer .fcols .fh{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--fg-sub); margin:0 0 10px}   /* 見出しの要素にしない（本文の h2 を数える箇所と混ざらない） */
.fcols ul{list-style:none; margin:0; padding:0}
.fcols li{margin:0 0 6px; line-height:1.6}
.fcols a{font-size:13.5px; color:var(--fg-2); font-weight:500}
.fcols a:hover{color:var(--accent)}
@media (max-width:820px){ .fcols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .pricebox > div{grid-template-columns:1fr}
  .pgsec{margin-top:48px}
  .endcta{padding:30px 18px}
  header .hact .cta{width:100%; text-align:center}
}
@media (max-width:820px){ .statstrip.compact li{padding-left:0; border-right:0; flex:1 1 100%; border-top:1px solid var(--rule-thin)} .statstrip.compact li:first-child{border-top:0} }

/* 2026-09-17 依頼の①：例文3つ（押すと欄に入る）と、あいまいな箇所の下線（03の実装 手5の4・06 ■4の2） */
.oex{margin:4px 0 14px}
.oexlist{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:8px}
.oexlist li{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--r-s); background:var(--ground); box-shadow:var(--ring)}
.oexbtn{align-self:flex-start; background:none; border:0; padding:0; font:inherit; font-size:14px; font-weight:600; color:var(--accent); cursor:pointer; text-align:left}
.oexbtn:hover{text-decoration:underline; text-underline-offset:3px}
.oexlist li span{font-size:13px; color:var(--fg-2); line-height:1.7}
.aimark{font-size:14px; line-height:1.9; color:var(--fg-2); white-space:pre-wrap; margin:6px 0 8px}
mark.vague{background:none; color:var(--fg); text-decoration:underline wavy var(--accent); text-underline-offset:4px}

/* ---------------- 最小限のページ（2026-09-17 夜・本人の決定「明日から始められる最小限」） ----------------
   トップの入口2つ（企業の方・働きたい方）は、ミッションのページの .cardlinks と同じ部品をヒーローの中で詰めて使う。
   依頼の画面の「案件の票」は、入力の欄と同じ面に一段濃い地を敷いて、AIが作った部分だと分かるようにする。色は変数だけ */
.hero .cardlinks.doors{margin:40px 0 56px; gap:16px}
.cardlinks.doors a{padding:28px}
.cardlinks.doors a em{display:block; font-style:normal; font-size:13px; color:var(--fg-sub); letter-spacing:.02em; margin:0 0 4px}
.cardlinks.doors a b{font-size:24px}
.rform .ticket{margin:34px 0 0; padding:26px 24px 8px; background:var(--ground); box-shadow:var(--ring); border-radius:var(--r)}
.rform .ticket h2{font-size:22px; margin:0 0 6px}
.offnote{color:var(--fg-sub); font-size:.92em}
@media(max-width:640px){
  .hero .cardlinks.doors{margin:28px 0 40px}
  .cardlinks.doors a{padding:22px}
  .rform .ticket{padding:20px 16px 4px}
}

/* 2026-09-22 #16 よくある質問（折りたたみ）。外からの読み込みは無し */
.faq details{margin:8px 0; padding:12px 18px; border-radius:var(--r); box-shadow:var(--ring); background:var(--card)}
.faq summary{cursor:pointer; font-weight:600; font-size:14.5px; color:var(--fg); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋ "; color:var(--faint)}
.faq details[open] summary::before{content:"－ "}
.faq details p{margin:8px 0 2px; color:var(--fg-2); font-size:14px; line-height:1.8}
/* 2026-09-22 #22 マイページの「次にやること」 */
.nextact{margin:10px 0 16px; padding:14px 18px; border-radius:var(--r); box-shadow:var(--ring); background:var(--card); border-left:4px solid var(--accent)}
.nextact b{display:block; font-size:15px}
.nextact .left{font-variant-numeric:tabular-nums; color:var(--accent); font-weight:700}

/* 2026-09-24 クラウドワークスの実測の色（お仕事一覧・ワーカー一覧で使う）。色は :root の変数にまとめる決まり（design.spec の6） */
:root{--cw-accent:#0060a9; --cw-link:#085591; --cw-box:#fcfcfc; --cw-line:#ccc; --cw-line2:#ddd; --cw-input-line:#afb7c1; --cw-input-fg:#353d48; --cw-chev:#bbb; --cw-on:#e8f0f8}
/* ---------------- お仕事一覧：クラウドワークスの「仕事を探す」の形（2026-09-24） ----------------
   📌 根拠：本人「クラウドワークスのように左でかてごりをせんたくできるようにしてほしい。全体画面に対する横幅もこれに統一。限りなく寄せて」
   数値は crowdworks.jp/public/jobs の実測（1280px・1600px の画面で同じ）。中身1000px・左200px・間20px */
body:has(.cwjobs) .wrap.wide{max-width:calc(1000px + var(--pad-side) * 2)}
body:has(.cwjobs) header h1{font-size:32px; font-weight:700; letter-spacing:0; line-height:1.15; margin-bottom:0}
.cwjobs{display:grid; grid-template-columns:200px minmax(0,1fr); gap:20px; align-items:start; margin:24px 0 0}
.cwcat-h{margin:0; font-size:14px; font-weight:700; line-height:20px; border-bottom:1px solid var(--cw-line2)}
.cwcat-h span{display:inline-block; padding:5px 1px; color:var(--cw-accent); border-bottom:3px solid var(--cw-accent); margin-bottom:-1px}
.cwcat{list-style:none; margin:10px 0 0; padding:18px 0 10px; background:var(--cw-box); border:1px solid var(--cw-line)}
.cwcat li{margin:0}
.cwcat .chip{display:block; width:100%; text-align:left; position:relative; background:none; border:1px solid transparent; border-radius:0;
  padding:4px 27px 4px 15px; font-size:11px; font-weight:700; line-height:18.33px; color:var(--cw-link); cursor:pointer; min-height:28px}
.cwcat .chip::after{content:""; position:absolute; right:12px; top:50%; width:6px; height:6px; margin-top:-4px;
  border-right:2px solid var(--cw-chev); border-top:2px solid var(--cw-chev); transform:rotate(45deg)}
.cwcat .chip:hover{text-decoration:underline}
.cwcat .chip.on{background:var(--cw-on); color:var(--cw-accent)}
.cwsearch{display:flex; gap:8px; padding:16px; background:var(--cw-box); border:1px solid var(--cw-line2); border-radius:4px}
.cwsearch input{flex:1; min-width:0; height:48px; padding:0 16px; font-size:16px; border:1px solid var(--cw-input-line); border-radius:4px; background:var(--bg); color:var(--cw-input-fg)}
.cwsearch input:focus{outline:0; border-color:var(--cw-accent); box-shadow:0 0 0 1px var(--cw-accent)}
.cwsearch button{height:48px; padding:0 16px; font-size:15px; font-weight:700; border:1px solid var(--cw-input-line); border-radius:4px; background:var(--bg); color:var(--cw-input-fg); cursor:pointer}
.cwbar{display:flex; align-items:center; gap:12px; margin:20px 0 0}
.cwbar select{height:38px; padding:0 8px; font-size:14px; border:1px solid var(--cw-input-line); border-radius:4px; background:var(--bg); color:var(--fg)}
.cwbar .hit{font-size:13px; color:var(--fg)}
.cwmain .jlist{margin-top:14px}
/* 見出しの帯・一覧の上の太い線を消し、クラウドワークスと同じく白地に見出し → すぐ一覧 */
body:has(.cwjobs) header{background:none; border-bottom:0; padding:28px 0 0}
.listsec:has(.cwjobs){margin:0; padding:0; border-top:0}
/* 2026-09-24 文字を大きくした。📌 根拠：本人「これの文字が少し小さすぎるもう少し大きく」。旧：見出し14px・項目11px（クラウドワークスの実測）→ 見出し16px・項目13px */
.wrap .cwjobs .cwcat-h{margin:0; font-size:16px; letter-spacing:0}
.cwjobs .cwcat .chip{font-size:13px; line-height:20px; padding:6px 27px 6px 15px; min-height:32px}
.cwjobs .cwcat .chip{box-shadow:none; background:none; border:1px solid transparent; border-radius:0}
.cwjobs .cwcat .chip.on{background:var(--cw-on)}
@media (max-width:760px){
  .cwjobs{grid-template-columns:1fr; gap:14px}
  .cwcat{display:flex; flex-wrap:wrap; padding:8px}
  .cwcat li{width:50%}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cwcat, :root:not([data-theme="light"]) .cwsearch{background:var(--card); border-color:var(--rule)}
  :root:not([data-theme="light"]) .cwcat .chip{color:var(--accent)}
  :root:not([data-theme="light"]) .cwcat .chip.on{background:var(--accent-soft)}
  :root:not([data-theme="light"]) .cwsearch input, :root:not([data-theme="light"]) .cwsearch button, :root:not([data-theme="light"]) .cwbar select{background:var(--bg); color:var(--fg); border-color:var(--rule)}
  :root:not([data-theme="light"]) .cwbar .hit{color:var(--fg-2)}
  :root:not([data-theme="light"]) .cwcat-h span{color:var(--accent); border-color:var(--accent)}
}

/* 2026-09-24 トップの1つ目の節のつり合い：見出しを大きく、入口の2つのカードを下へ。
   📌 根拠：本人「バランスを調節して、（入口のカード）はもう少し↓、AIを使う側へ この文字をもう少し大きく」
   旧：見出し clamp(40px, 6.4vw, 78px)・カードの上の余白 34px */
@media (min-width:861px){
  .homepage .band.hero h1{font-size:max(56px, min(7.4vw, 12vh, 104px)); line-height:1.08}   /* 背の低い画面では高さに合わせて縮める */
  .homepage .band.hero .doors{margin-top:clamp(40px, 9vh, 104px)}
}

/* 2026-09-24 トップの画像（人間とロボットの「アダムの創造」）を最初の節の全面の背景にする。デスクトップだけ。
   📌 根拠：本人「もっと画面いっぱいに」→「全面の背景にする」を選択。文字が読めるよう左を背景色でぼかす
   旧（同日・1回目）：見出しの右に2列で並べる（grid 0.9fr／1.1fr・角丸の枠）
   旧（同日・0回目）：見出しの下に中央寄せ・最大640px。1280×720で画像が画面から切れた（実測） */
@media (min-width:861px){
  .homepage .band.hero:has(.shot){position:relative}
  .homepage .band.hero .wrap:has(.shot) > :not(.shot){position:relative; z-index:1}  /* 文字を画像の上に */
  .homepage .band.hero .wrap > .shot{position:absolute; inset:0; z-index:0; margin:0; max-width:none;
    border-radius:0; background:none}   /* .wrap は位置の基準にしないので、節（.band.hero）いっぱいに広がる */
  .homepage .band.hero .shot img{width:100%; height:100%; aspect-ratio:auto; max-height:none;
    object-fit:cover; object-position:60% center}
  /* 2026-09-24 文字を右下へ移し、ぼかしも右下だけに。📌 根拠：本人「文字を右にしようかな、ロボットが隠れるのは良くない」
     右下は画像の中で何も写っていない所（人の手は右上、ロボットは左下）
     旧：文字は左・ぼかしは左から linear-gradient(90deg, bg 90% 0%, bg 70% 32%, transparent 62%) */
  .homepage .band.hero:has(.shot){align-items:flex-end; padding-bottom:clamp(32px, 6vh, 72px)}
  .homepage .band.hero .wrap:has(.shot){text-align:right}
  .homepage .band.hero .wrap:has(.shot) .deck{margin-left:auto}   /* 幅の決まった段落も右へ寄せる */
  .homepage .band.hero .shot::after{content:""; position:absolute; inset:0;
    background:radial-gradient(ellipse 55% 60% at 100% 100%, color-mix(in srgb, var(--bg) 85%, transparent) 0%,
      color-mix(in srgb, var(--bg) 55%, transparent) 55%, transparent 100%)}
  /* 暗い表示では文字が白くなり、明るい灰色の画像の上で読みにくかった（実測）ので、ぼかしを広く濃くする */
  :root[data-theme="dark"] .homepage .band.hero .shot::after{
    background:radial-gradient(ellipse 70% 85% at 100% 100%, color-mix(in srgb, var(--bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg) 75%, transparent) 50%, transparent 100%)}
  :root[data-theme="dark"] .homepage .band.hero .wrap:has(.shot){text-shadow:0 2px 18px var(--hero-shadow)}
}
@media (min-width:861px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .homepage .band.hero .shot::after{
    background:radial-gradient(ellipse 70% 85% at 100% 100%, color-mix(in srgb, var(--bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--bg) 75%, transparent) 50%, transparent 100%)}
  :root:not([data-theme="light"]) .homepage .band.hero .wrap:has(.shot){text-shadow:0 2px 18px var(--hero-shadow)}
}

/* 2026-09-24 見出しを2つに分け、1行目「創る側か。」を画像の左上、2行目「創られる側か。」を右下に置く。デスクトップだけ（スマホは2行に積む）。
   📌 根拠：本人「左上とみぎしたにあるから、そこに文字を置く」。左上・右下は画像の中で何も写っていない所（ロボットは左下、人の手は右上）
   ぼかしも右下だけから、左上と右下の2か所に。旧：右下だけ radial-gradient(… at 100% 100%) */
@media (min-width:861px){
  .homepage .band.hero .wrap:has(.shot) > h1.split{position:absolute; z-index:1; margin:0;
    inset:clamp(36px, 8vh, 96px) clamp(32px, 6vw, 104px)}
  .homepage h1.split br{display:none}
  /* 2026-09-24 左上の文字を内側へ寄せた。📌 根拠：本人「左上の文字が、左上すぎる。右下は悪くない」 旧：top:0; left:0 */
  .homepage h1.split .l1{position:absolute; top:clamp(24px, 9vh, 110px); left:clamp(24px, 7vw, 150px)}
  .homepage h1.split .l2{position:absolute; right:0; bottom:0}
  .homepage .band.hero:has(h1.split) .shot::after{
    background:radial-gradient(ellipse 50% 45% at 0% 0%, color-mix(in srgb, var(--bg) 80%, transparent) 0%, transparent 100%),
               radial-gradient(ellipse 55% 50% at 100% 100%, color-mix(in srgb, var(--bg) 80%, transparent) 0%, transparent 100%)}
  :root[data-theme="dark"] .homepage .band.hero:has(h1.split) .shot::after{
    background:radial-gradient(ellipse 60% 60% at 0% 0%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 100%),
               radial-gradient(ellipse 65% 65% at 100% 100%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 100%)}
}
@media (min-width:861px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .homepage .band.hero:has(h1.split) .shot::after{
    background:radial-gradient(ellipse 60% 60% at 0% 0%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 100%),
               radial-gradient(ellipse 65% 65% at 100% 100%, color-mix(in srgb, var(--bg) 92%, transparent) 0%, color-mix(in srgb, var(--bg) 70%, transparent) 45%, transparent 100%)}
}

/* 旧（同日・1回目）：行ごとに左右からすべり込ませていた
( 2026-09-24 見出しを左上→右下の順にすべり込ませる。📌 根拠：本人「左上から、スライドで表示されるように、次に、右下、という感じ」
   1行目は左から、0.4秒あとに2行目が右から。動きを減らす設定の人には動かさない )
@keyframes ldb-in-left{from{opacity:0; transform:translateX(-48px)} to{opacity:1; transform:none}}
@keyframes ldb-in-right{from{opacity:0; transform:translateX(48px)} to{opacity:1; transform:none}}
.homepage h1.split .l1{animation:ldb-in-left .9s cubic-bezier(.2,.7,.2,1) .2s both}
.homepage h1.split .l2{animation:ldb-in-right .9s cubic-bezier(.2,.7,.2,1) .9s both}
@media (max-width:860px){ .homepage h1.split span{display:inline-block} }
@media (prefers-reduced-motion:reduce){ .homepage h1.split span{animation:none} }
*/
/* 2026-09-24 LUVIA（luvia.co.jp の最初の画面）をお手本に組み直した。📌 根拠：本人「luviaをイメージして」
   お手本の実測（style.css・script.js）：1字ずつ span に分け 0.1秒ずつずらして 0.5秒で浮かぶ（kvCharFadeIn）／行ごと 40px すべる（kvToLeft 0.5s）
     ／和文は Noto Serif JP・太さ400・字間 .04em／画像は 8秒かけて引く（zoomOut 8s ease-in-out）
   当社：外の書体は読み込まない決まり（design 7）なので、端末にある明朝体を使う。1行目は0.3秒から、2行目は1行目が出そろった1.2秒から */
@keyframes ldb-char{from{opacity:0} to{opacity:1}}
@keyframes ldb-in-left{from{transform:translateX(-40px)} to{transform:none}}
@keyframes ldb-in-right{from{transform:translateX(40px)} to{transform:none}}
@keyframes ldb-zoomout{from{transform:scale(1.08)} to{transform:scale(1)}}
.homepage h1.split{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif; font-weight:500; letter-spacing:.04em}
.homepage h1.split .l1,.homepage h1.split .l2{display:inline-block}
/* 2026-09-24 もう少しゆっくりに。📌 根拠：本人「文字の表示をもう少しだけゆっくり表示しだすようにして」
   出だし 0.3→0.6秒・1字の間 0.1→0.15秒・1字が浮かぶ時間 0.5→0.8秒・行のすべり 0.9→1.2秒。2行目は 1.2→1.9秒から
   旧：
.homepage h1.split .c{display:inline-block; opacity:0; animation:ldb-char .5s ease-out forwards}
.homepage h1.split .l1{animation:ldb-in-left .9s cubic-bezier(.2,.7,.2,1) .3s both}
.homepage h1.split .l2{animation:ldb-in-right .9s cubic-bezier(.2,.7,.2,1) 1.2s both}
.homepage h1.split .l1 .c:nth-child(1){animation-delay:.3s}  .homepage h1.split .l1 .c:nth-child(2){animation-delay:.4s}
.homepage h1.split .l1 .c:nth-child(3){animation-delay:.5s}  .homepage h1.split .l1 .c:nth-child(4){animation-delay:.6s}
.homepage h1.split .l2 .c:nth-child(1){animation-delay:1.2s} .homepage h1.split .l2 .c:nth-child(2){animation-delay:1.3s}
.homepage h1.split .l2 .c:nth-child(3){animation-delay:1.4s} .homepage h1.split .l2 .c:nth-child(4){animation-delay:1.5s}
.homepage h1.split .l2 .c:nth-child(5){animation-delay:1.6s} .homepage h1.split .l2 .c:nth-child(6){animation-delay:1.7s}
*/
.homepage h1.split .c{display:inline-block; opacity:0; animation:ldb-char .8s ease-out forwards}
.homepage h1.split .l1{animation:ldb-in-left 1.2s cubic-bezier(.2,.7,.2,1) .6s both}
.homepage h1.split .l2{animation:ldb-in-right 1.2s cubic-bezier(.2,.7,.2,1) 1.9s both}
.homepage h1.split .l1 .c:nth-child(1){animation-delay:0.60s}
.homepage h1.split .l1 .c:nth-child(2){animation-delay:0.75s}
.homepage h1.split .l1 .c:nth-child(3){animation-delay:0.90s}
.homepage h1.split .l1 .c:nth-child(4){animation-delay:1.05s}
.homepage h1.split .l2 .c:nth-child(1){animation-delay:1.90s}
.homepage h1.split .l2 .c:nth-child(2){animation-delay:2.05s}
.homepage h1.split .l2 .c:nth-child(3){animation-delay:2.20s}
.homepage h1.split .l2 .c:nth-child(4){animation-delay:2.35s}
.homepage h1.split .l2 .c:nth-child(5){animation-delay:2.50s}
.homepage h1.split .l2 .c:nth-child(6){animation-delay:2.65s}
/* 2026-09-25 見出しを「AIの仕事を、／頼める・請けられる。」（7字／10字）にしたので、足りない字の出だしを足した（同じ 0.15秒おき）。
   2行目は1行目が出そろった後の 1.90秒から。📌 根拠：本人「AIの仕事を、頼める・請けられる これにしよう」 */
.homepage h1.split .l1 .c:nth-child(5){animation-delay:1.20s}
.homepage h1.split .l1 .c:nth-child(6){animation-delay:1.35s}
.homepage h1.split .l1 .c:nth-child(7){animation-delay:1.50s}
.homepage h1.split .l2 .c:nth-child(7){animation-delay:2.80s}
.homepage h1.split .l2 .c:nth-child(8){animation-delay:2.95s}
.homepage h1.split .l2 .c:nth-child(9){animation-delay:3.10s}
.homepage h1.split .l2 .c:nth-child(10){animation-delay:3.25s}
/* 2026-09-25 2行目（10字）が狭いスマホで横にはみ出した（design 2 のテスト）。行の幅を画面の幅までにして、字の間で折り返させる */
.homepage h1.split .l1,.homepage h1.split .l2{max-width:100%}
/*   実測（375pxの画面）：止まった後の右端は353pxで収まるが、右から40pxすべり込む途中は393pxまで出る。
     スマホは行を左上・右下に分けず積むだけなので、行のすべりをやめ、1字ずつ浮かぶ動きだけ残す */
@media (max-width:860px){ .homepage h1.split .l1,.homepage h1.split .l2{animation:none} }
.homepage .band.hero:has(h1.split) .shot{overflow:hidden}
.homepage .band.hero:has(h1.split) .shot img{animation:ldb-zoomout 8s ease-in-out both}
/* 2026-09-24 旧（同日）：くっきりの画像の上にぼかした画像（img.blur）を重ね、1.8秒から3秒かけて浮かばせていた。
   📌 根拠：本人「徐々にぼかすというのは外側に対して…時間経過とともに…という意味ではない」→ 画像そのもの（hero_blur.py）で外側へ段階的にぼかす形に戻した
( 2026-09-24 外側のぼかしを徐々に。くっきりの画像の上に、外側をぼかした画像（.blur）を重ね、文字が出そろう1.8秒から3秒かけて浮かび上がらせる。
   📌 根拠：本人「徐々にぼかすようにしてほしい」。はじめは全体がくっきり→ピントが指先に寄っていくように見せる )
@keyframes ldb-fadein{from{opacity:0} to{opacity:1}}
.homepage .band.hero .shot{position:relative}
.homepage .band.hero:has(h1.split) .shot img.blur{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center;
  opacity:0; animation:ldb-zoomout 8s ease-in-out both, ldb-fadein 3s ease-in-out 1.8s forwards}
*/
@media (prefers-reduced-motion:reduce){
  .homepage h1.split .l1,.homepage h1.split .l2,.homepage .band.hero:has(h1.split) .shot img{animation:none}
  .homepage h1.split .c{animation:none; opacity:1}
}

/* 2026-09-24 トップの「仕事の例」「安心の仕組み」を上の節と同じブロックの表記に。📌 根拠：本人「表記の形式が変わっている。上と同じような表記に」 */
.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.exfields em{display:block; margin-top:12px; font-style:normal; font-weight:700; font-size:15px; color:var(--accent)}
.exfields + .fhint{margin-top:16px}
@media (max-width:560px){ .fields.two{grid-template-columns:1fr} }

/* 2026-09-24 幅を1000pxにしたことで増えた改行を直す。
   📌 根拠：本人「中身のこれまでのサイズ文字のサイズなども修正をして、そうしないと、文字の改行などが起きて見づらい」
   実測（1440pxの画面・前の幅と比べて行数が増えた所）：トップのブロックの幅が165pxになり見出しが2行に（6件）／表の左の列が44〜99pxに押しつぶされ2行に（9件） */
@media (min-width:861px){
  /* トップ：左の見出しの列 300→240px・間 56→40px にして、右のブロックに幅を回す。ブロックの文字も幅に合わせて一回り小さく */
  .homepage .secgrid{grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:40px}
  .homepage .fields{gap:12px}
  .homepage .fields li{padding:20px 16px}
  .homepage .fields b{font-size:15px}
  .homepage .fields span{font-size:13px; line-height:1.65}
  .homepage .sechead h2{font-size:clamp(24px, 2.2vw, 28px)}   /* 左の列240pxに「頼める仕事の例と」の8文字が1行で入る大きさ */
  /* 表：左の列は最低8文字分の幅（「契約の形態」「対価以外の費用」などを1行で）。長い文の列は今までどおり折り返す
     旧（同日）：white-space:nowrap → 規約の禁止事項・請求書の表が横にはみ出したのでやめた */
  .tw tbody tr > :first-child{min-width:calc(8.5em + 28px)}   /* 8文字＋左右の余白 */
}

/* ---------------- ワーカー一覧（企業の方・2026-09-24） ----------------
   📌 根拠：本人「企業の方のところも、働き手の一覧が表示されるようにしたい」。形はお仕事一覧と同じ（左に分野・右に検索とカード） */
body:has(.cwjobs) .listsec{margin:0; padding:0; border-top:0}
.wlist{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px}
.wcard{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:20px 22px}
.whead{display:flex; gap:14px; align-items:center}
.wav{flex:none; width:48px; height:48px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px}
.wname{margin:0; font-size:16px; font-weight:700}
.wdemo{display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700;
  color:var(--muted); box-shadow:var(--ring); vertical-align:2px}
.wfield{margin:2px 0 0; font-size:13px; color:var(--accent); font-weight:700}
.wintro{margin:12px 0 10px; font-size:14.5px; line-height:1.7}
.wfoot{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13.5px; color:var(--fg-2)}
.wfoot .wpay{font-weight:700; color:var(--fg)}
.wbtn{margin-left:auto; padding:9px 16px; border-radius:6px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:14px; text-decoration:none}
.wbtn:hover{filter:brightness(1.08)}
@media (max-width:560px){ .wbtn{margin-left:0; width:100%; text-align:center} }

/* ============================================================== 本登録の4段（signup.php・2026-09-24）
   📌 根拠：2026-09-24 本人「クラウドワークスの構造をまずはパクる」。クラウドワークスの本登録の画面4枚と同じ並び
   （上に①〜④の段・左に項目名と必須/公開の札・右に入力・下に「前に戻る／次に進む」） */
.regcard{padding:34px 40px 30px}
.regcard h1{margin-bottom:24px}
.regsteps{display:flex; list-style:none; margin:0 0 28px; padding:0; counter-reset:none}
.regsteps[hidden]{display:none}   /* 2026-09-25 依頼の画面（order）でログイン前に6段の表示が門の下に残っていた（display:flex が hidden に勝つ）ため */
.regsteps li{flex:1; position:relative; text-align:center; font-size:14px; color:var(--fg)}
.regsteps li::before{content:""; position:absolute; top:14px; left:-50%; width:100%; height:1px; background:var(--line); z-index:0}
.regsteps li:first-child::before{display:none}
.regsteps li span{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:29px; height:29px; margin:0 auto 6px;
  border-radius:50%; background:var(--ground); font-weight:700; font-size:15px; border:1.5px solid transparent}
.regsteps li b{display:block; font-weight:700}
.regsteps li.on{color:var(--accent)}
.regsteps li.on span{background:var(--card); border-color:var(--accent); color:var(--accent)}
.regrow{display:grid; grid-template-columns:190px 1fr; gap:0 16px; margin:0 0 24px}
.reglb{display:flex; justify-content:flex-end; gap:6px; align-items:flex-start; padding-top:2px; text-align:right}
.reglb b{font-size:13.5px; font-weight:700; color:var(--fg); line-height:22px}
.regtags{display:flex; flex-direction:column; gap:4px; align-items:flex-end}
.regtag{display:inline-block; font-size:11px; font-weight:700; line-height:1; padding:5px 7px; border-radius:2px; white-space:nowrap}
.regtag.req{background:var(--err); color:var(--card)}
.regtag.pub{background:var(--card); color:var(--fg); border:1px solid var(--line); padding:4px 6px}
.regin{min-width:0}
.regcard .regin input[type=text],.regcard .regin input[type=password],.regcard .regin select{width:100%; max-width:300px; box-sizing:border-box}
.regcard .regin select{font:inherit; font-size:14px; padding:9px 10px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--fg); max-width:170px}
.regcard .regin .regshort{max-width:200px}
.regpw{position:relative; display:block; max-width:300px}
.regpw input{padding-right:40px !important}
.regeye{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); cursor:pointer; padding:4px; line-height:0}
.regcount{max-width:300px; margin:4px 0 0; text-align:right; font-size:11.5px; color:var(--accent)}
.regok{margin:0 0 6px; font-size:12px; min-height:0}
.regok:empty{display:none}
.regok.yes{color:var(--ok)}
.regok.yes::before{content:"✓ "}
.regok.no{color:var(--err)}
.regnote{margin:8px 0 0; font-size:12.5px; line-height:1.9; color:var(--fg-2)}
.regnote.top{margin:0 0 6px}
.regnote.warn{color:var(--fg-2)}
.regtext{margin:0; font-size:14px; line-height:22px}
.regerr{margin:6px 0 0; font-size:12.5px; font-weight:600; color:var(--err)}
.regradio{display:flex; flex-wrap:wrap; gap:6px 22px; font-size:14px; line-height:22px}
.regradio label,.regbox label,.regcheck,.regagree{display:flex; align-items:center; gap:7px; cursor:pointer}
.regpair{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.regpair label{display:block}
.regpair b{display:block; font-size:13px; font-weight:700; margin:0 0 8px}
.regcard .regpair input{max-width:none}
.reginline{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center}
.regcheck{font-size:13.5px}
.regbox{display:flex; flex-direction:column; gap:12px; padding:16px 20px; border:1px solid var(--line); border-radius:4px; background:var(--ground); font-size:14px; max-width:470px}
.regbtns{display:flex; justify-content:center; gap:24px; margin:30px 0 0}
.regbtns .cta,.regback{min-width:88px; padding:11px 16px; font-size:14px; border-radius:4px}
.regback{border:1px solid var(--line); background:var(--card); color:var(--fg); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.regbtns .cta:disabled{opacity:.5; cursor:not-allowed}
.regconf{display:grid; grid-template-columns:max-content 1fr; gap:14px 10px; margin:0; padding:30px 40px; border:1px solid var(--line); border-radius:4px; background:var(--ground); font-size:14px}
.regconf dt{font-weight:700; text-align:right; color:var(--fg)}
.regconf dd{margin:0; color:var(--fg); overflow-wrap:anywhere}
.regagree{justify-content:center; margin:24px 0 0; font-size:13.5px}
@media (max-width:640px){
  .regcard{padding:24px 18px 22px}
  .regrow{grid-template-columns:1fr; gap:8px}
  .reglb{justify-content:flex-start; text-align:left}
  .regtags{flex-direction:row}
  .regsteps li{font-size:11.5px}
  .regconf{padding:18px 16px}
}
/* 選択ボタンは上の .onlycard input の「幅いっぱい・枠つき」を受けない */
.onlycard.regcard .regradio label input[type=radio][name]{display:inline-block; width:auto; margin:0; padding:0; border:0; flex:none}

/* 2026-09-24 ワーカー一覧のカード：上＝アカウント名とキャッチコピー／中＝評価・受注実績・職種・スキル／右下＝気になる・相談する。左上の番号の丸は使わない */
.whead{display:block}
.wname{font-size:17px}
.wcatch{margin:6px 0 0; font-size:14.5px; line-height:1.7; color:var(--fg)}
.wmeta{display:flex; flex-wrap:wrap; gap:8px 28px; margin:14px 0 0; padding:12px 0 0; border-top:1px solid var(--line)}
.wmeta div{display:flex; gap:8px; align-items:baseline; font-size:14px}
.wmeta dt{color:var(--muted); font-size:12.5px}
.wmeta dd{margin:0}
.wstar{color:var(--star); margin-right:2px}
.wsub{color:var(--muted); font-size:12.5px}
.wsk-h{margin:12px 0 6px; color:var(--muted); font-size:12.5px}
.wcard .wfoot{justify-content:flex-end; gap:10px}
.wcard .wbtn{margin-left:0}
.wlike{padding:8px 14px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--fg); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.wlike::before{content:"♡ "}
.wlike[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
.wlike[aria-pressed="true"]::before{content:"♥ "}
@media (max-width:560px){ .wcard .wfoot{justify-content:stretch} .wlike,.wcard .wbtn{flex:1 1 100%; text-align:center} }

/* 2026-09-24 サポートの5ページ（build_support.py）と足元の「サポート」の列。色は変数だけ */
.fcols{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:820px){ .fcols{grid-template-columns:repeat(2,minmax(0,1fr))} }
.splinks{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:10px}
.splist{margin:8px 0 6px; padding-left:1.3em; line-height:1.9}
.spact{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin:18px 0 0}
.sptoc{display:flex; flex-wrap:wrap; gap:8px 12px; margin:8px 0 0}
.sptoc a{padding:7px 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; color:var(--fg); text-decoration:none}
.sptoc a:hover{border-color:var(--accent); color:var(--accent)}
.spmore{margin-top:40px}
/* 2026-09-24（午後）サポートの5ページの余白を広げる。📌 根拠：本人「幅が狭すぎる、もう少し空白を作って」。
   節の間は他のページの .pgsec（64px）より広く、文の行間とカードの内側も広げた。旧：.wrap h2 の 40px・ol.flow の間 14px・.tw td 14px 18px */
.sp{padding-bottom:96px}   /* 最後の節が足元にくっつかないように */
/* 2026-09-24（夕）本人「余白というのは『とは』と『依頼したい方・働きたい方』の節の間をあけてほしいということ」
   → 節と節の間だけを広げる（120px）。カード・表・行間を広げた分は戻した。
   旧：.wrap .sp h2 margin:80px 0 22px／.sp p line-height:2／.sp ol.flow gap:22px・li padding:28px 26px 30px／.sp .tw td padding:22px 24px ほか */
.wrap .sp h2{margin:120px 0 16px}
.wrap .sp > h2:first-child{margin-top:48px}
@media (max-width:640px){ .wrap .sp h2{margin-top:72px} }

/* 2026-09-24 ログインできない方へ（help.php）。会員まわりの枠（.onlycard）に合わせる。色は変数だけ */
.onlycard select{display:block; width:100%; box-sizing:border-box; font:inherit; font-size:15px;
  padding:11px 12px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg); color:var(--fg)}
.helptry{margin:0 0 14px; padding-left:1.3em; font-size:13.5px; line-height:1.8; color:var(--fg-2)}
.helpno{margin:0 0 16px; text-align:center; font-size:15px; color:var(--fg)}
.onlyhelp{text-align:center; margin:10px 0 0; font-size:13px}
.onlyhelp a{color:var(--fg-2)}

/* 2026-09-24 公開のお仕事一覧と応募（work.php）・企業の応募者一覧（mepane.php）。色は変数だけ */
.jobtbl th{width:9em; text-align:left; vertical-align:top; white-space:nowrap}
.jobtbl td{white-space:normal}
.mlist .who .app-note{color:var(--fg-2); background:var(--ground); border-radius:var(--r-s); padding:8px 10px; margin-top:6px}
.cwcat a.chip{text-decoration:none; color:inherit}

/* 2026-09-24（夜）ヘッダーの会員メニュー（lib.php の ldb_usermenu_html）。頭文字の丸＋ユーザー名、カーソルを合わせる・押すと5項目。
   📌 お手本：クラウドワークスの右上の名前のメニュー（https://crowdworks-help.zendesk.com/hc/ja/articles/5006077943838「ページ右上の名前を選択」）。色は変数だけ */
.umenu{position:relative; flex:none}
.ubtn{display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700;
  color:var(--fg-2); padding:5px 10px 5px 5px; border-radius:var(--r-s)}
.ubtn:hover,.umenu.open .ubtn{background:var(--ground); color:var(--fg)}
.uav{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:13px; font-weight:700; flex:none}
.uname{max-width:12em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ulist{display:none; position:absolute; right:0; top:100%; z-index:50; min-width:220px; margin:0; padding:6px 0; list-style:none;
  background:var(--card); border-radius:var(--r-s); box-shadow:var(--ring-hi)}
.umenu:hover .ulist,.umenu:focus-within .ulist,.umenu.open .ulist{display:block}
.ulist a{display:block; padding:9px 16px; font-size:13.5px; color:var(--fg); white-space:nowrap}
.ulist a:hover,.ulist a:focus{background:var(--ground); text-decoration:none}
.ulist li:last-child{border-top:1px solid var(--line); margin-top:4px; padding-top:4px}
@media (max-width:640px){ .sitebar .umenu{margin-left:auto} .uname{max-width:7em} }

/* 2026-09-24（夜）公開ページ（member.php）。📌 根拠：本人がフォルダに置いた画像 Desktop/このファイル/マイページ.png（クラウドワークスの公開ページ）。
   左の列190px＋右の列。節の見出しは左に主色の縦線つきの帯、中身は枠（空なら中央に「〜はありません。」）。色は変数だけ */
.mp{padding-top:22px; padding-bottom:72px}
.mp-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.mp-bc{font-size:13px; color:var(--fg-2); display:flex; align-items:center; gap:6px}
.mp-bc a{color:var(--accent); display:inline-flex}
.wrap .mp-name{font-size:24px; font-weight:500; margin:14px 0 20px; letter-spacing:0}
.mp-grid{display:grid; grid-template-columns:190px minmax(0,1fr); gap:32px; align-items:start}
.mp-av{width:100%; aspect-ratio:1/1; color:var(--fg-2); background:var(--ground); overflow:hidden}
.mp-user{font-weight:700; text-align:center; margin:10px 0 0; font-size:14px}
.mp-seen{text-align:center; font-size:11.5px; color:var(--muted); margin:2px 0 12px}
.mp-flag{font-size:12.5px; color:var(--muted); margin:0 0 14px}
.mp-flag.ok{color:var(--ok)}
.mp-num{margin:0; border-top:1px solid var(--line)}
.mp-num > div{padding:14px 4px; border-bottom:1px solid var(--line)}
.mp-num dt{font-size:13px; font-weight:700; color:var(--fg)}
.mp-num dd{margin:4px 0 0; font-size:22px; font-weight:700}
.mp-num dd small{font-size:13px; margin-left:2px}
.mp-sub{margin:6px 0 0; font-size:12px; text-align:center; background:var(--ground); padding:3px 0}
.mp-meta{margin:14px 0 0; font-size:13px}
.mp-meta div{display:flex; gap:14px; margin:4px 0}
.mp-meta dt{font-weight:700; min-width:5em}
.mp-meta dd{margin:0}
.mp-tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px}
.mp-tabs button{background:none; border:1px solid transparent; border-bottom:0; padding:12px 18px; font:inherit; font-size:13.5px; color:var(--accent); cursor:pointer; border-radius:var(--r-s) var(--r-s) 0 0; margin-bottom:-1px}
.mp-tabs button.on{color:var(--fg); border-color:var(--line); background:var(--bg)}
.mp-pane{display:none}
.mp-pane.on{display:block}
.mp-sec{margin:0 0 22px}
.wrap .mp-h{font-size:14.5px; font-weight:500; margin:0 0 20px; padding:9px 14px; border-left:4px solid var(--accent); background:var(--ground); border-bottom:1px solid var(--line); letter-spacing:0}
.mp-box{border:1px solid var(--line); border-radius:var(--r-s); padding:20px 22px; background:var(--card); font-size:14px; line-height:1.8}
.mp-box.mp-empty{text-align:center; color:var(--fg-2)}
.mp-list{margin:0; padding-left:1.2em}
.mp-star{color:var(--accent); letter-spacing:1px}
@media (max-width:640px){ .mp-grid{grid-template-columns:1fr} .mp-av{max-width:140px; margin:0 auto} }

/* 2026-09-24（夜）本登録の行（.regrow は display:grid）に hidden を効かせる（海外に住む人の郵便番号・都道府県の行。tests/signup4.spec が見つけた） */
.regrow[hidden]{display:none}

/* 2026-09-25 トップを「見る人の問いの順」に組み直した（build_work.py HOME_MVP の日本語）。📌 根拠：本人「うん。其れで組みなおして」
   ① 最初の画面の下に1行とボタン2つ（.herobar）。画像の節を少し低くして、1366×768 で最初の画面に入るようにする
      旧：画像の節は画面いっぱい（calc(100svh - 62px)）。NN/g「画面いっぱいだとそこで終わったように見える」 */
@media (min-width:861px){
  .homepage .band.hero{min-height:calc(100vh - 62px - 150px); min-height:calc(100svh - 62px - 150px)}
}
/*   トップの節は高さをそろえる設定（.homepage .band の min-height:min(82vh, 760px)）なので、この2つの節（.herobar・.endcta）だけ外す */
.homepage .band.herobar{padding:24px 0 28px; min-height:0; display:block; background:var(--bg)}
.homepage .band.endcta{padding:72px 0; min-height:0; display:block}
.homepage .herobar .wrap{display:flex; align-items:center; justify-content:space-between; gap:18px 32px; flex-wrap:wrap}
.homepage .hbline{margin:0; font-size:16px; line-height:1.7; color:var(--fg); max-width:620px}
.homepage .hbact{margin:0; display:flex; gap:12px; flex-wrap:wrap}
.homepage .hbact .cta{min-width:160px; text-align:center}
/* ② 2026-09-25 本人「（分野のブロックは）のせなくてよい」→ 下の .catlinks は使っていない（記録として残す）。新着はお仕事一覧と同じ .jcard
   旧：分野のブロックを押せるように（その分野のお仕事一覧へ）。7つ＝3列で並べ、最後の1つは左に寄る */
.homepage .newjobs .jlist{margin-top:0}
.homepage .catlinks li{padding:0}
.homepage .catlinks a{display:block; padding:20px 18px; color:inherit; text-decoration:none; border-radius:var(--r)}
.homepage .catlinks a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.homepage .catlinks a:hover b{color:var(--accent)}
.homepage .newjobs h3{margin:26px 0 0; font-size:15px}
.homepage .newjobs .jtitle{margin:0; font-size:15.5px}
.homepage .secgrid .fsend{margin-top:22px}
/* ③ ご利用の流れを企業／働く方の2列に */
/* 2026-09-25 本人「働く方が上段、企業の方が下段」→ 段を上下に積み、各段の3つを横に並べる。
   旧（同日）：.flow2 を2列（grid-template-columns:repeat(2,…); gap:28px）、760px以下で1列 */
.homepage .flow2{display:grid; grid-template-columns:1fr; gap:34px}
.homepage .flow2 h3{margin:0 0 10px; font-size:15px; color:var(--accent)}
.homepage .flow2 ol.flow{margin-top:0; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){ .homepage .flow2 ol.flow{grid-template-columns:1fr} }
/* ⑥ 最後のボタン2つ */
.homepage .endcta .wrap{text-align:center}
.homepage .endcta h2{margin:0 0 18px}
.homepage .endcta .hbact{justify-content:center}

/* 2026-09-25 会員の設定ページ（振込先口座登録ほか）：左に4項目の並び、右に入力欄。bank.php・lib.php の ldb_acct_side
   📌 根拠：本人「クラウドワークスの画面を参考に、左のサイドバーは4項目を表示、編集画面は寄せて、マルパクリはやめて」 */
.wrap.acct{max-width:1040px; display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; align-items:start; padding-top:32px; padding-bottom:56px}
.acct-side ul{list-style:none; margin:0; padding:0; background:var(--card); border-radius:var(--r); box-shadow:var(--ring); overflow:hidden}
.acct-side li + li{border-top:1px solid var(--line-2)}
.acct-side a{display:block; padding:12px 16px; font-size:14px; color:var(--fg-2); text-decoration:none; border-left:3px solid transparent}
.acct-side a:hover{background:var(--ground); color:var(--fg)}
.acct-side a[aria-current=page]{border-left-color:var(--accent); background:var(--ground); color:var(--fg); font-weight:600}
.wrap .acct-h1{font-size:22px; letter-spacing:-.02em; margin:0 0 14px}
.wrap .acct-h2{font-size:16px; margin:26px 0 10px}
.acct-notes{margin:0 0 22px; padding-left:18px; color:var(--fg-2); font-size:14px; line-height:1.8}
.acct-notes b{color:var(--fg); font-weight:600}
.acct-side, .acct-main{min-width:0}
.acct-cur{margin:0 0 6px}
.acct-cur table{table-layout:fixed}
.acct-cur th{width:130px}
.acct-cur td.num{text-align:left; width:auto; color:var(--fg)}
.acct-form{background:var(--ground); border-radius:var(--r); box-shadow:var(--ring); padding:26px 28px}
.acct-row{display:grid; grid-template-columns:130px minmax(0,1fr); gap:18px; align-items:start; padding:12px 0}
.acct-lb{font-size:14px; font-weight:600; color:var(--fg); padding-top:10px; text-align:right}
.acct-lb label{font:inherit; color:inherit}
.acct-in input[type=text]{width:100%; max-width:340px; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); color:var(--fg)}
.acct-in input.acct-short{max-width:160px; font-variant-numeric:tabular-nums}
.acct-in .fhint{margin:6px 0 0}
.acct-radios{display:flex; flex-wrap:wrap; gap:8px 10px}
.acct-radios .check{padding:9px 14px; margin:0; background:var(--card)}
.acct-send{padding:14px 0 0 148px}
@media (max-width:760px){
  .wrap.acct{grid-template-columns:1fr; gap:20px; padding-top:20px}
  .acct-side ul{display:grid; grid-template-columns:1fr 1fr}
  .acct-side li + li{border-top:0}
  .acct-side li:nth-child(n+3){border-top:1px solid var(--line-2)}
  .acct-side li:nth-child(even){border-left:1px solid var(--line-2)}
  .acct-side a{padding:11px 12px; font-size:13px}
  .acct-form{padding:18px 16px}
  .acct-row{grid-template-columns:1fr; gap:6px; padding:9px 0}
  .acct-lb{text-align:left; padding-top:0}
  .acct-send{padding-left:0}
}

/* 2026-09-25 トップの「募集中のお仕事」。📌 根拠：本人「仕事の一覧は横に流れる形にしよう」＋ https://luvia.co.jp/
   お手本の実測（1366px）：物件のカード幅 468px・間 20px・左端は本文の線（123px）・右は画面の端まで（3枚目が切れて見える）／
     見出しの行に 説明・左右の矢印・「詳しく見る」と丸い矢印／カードは枠なし：写真 → 名前＋「新着」 → 間取り → 価格（大きく）と丸い矢印 → 線 → 住所
   当社は写真が無いので、件名・分野と期間・報酬・線・応募の人数を同じ順で置き、白いカードにした
   旧（同日）：カード幅 360px を横一列にして自動で流していた。その設定：
   | .homepage .jobsband .sechead{max-width:640px; margin-bottom:26px}
   | .homepage .jflow{overflow-x:auto; padding:6px 0 14px; -webkit-mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent); mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
   | .homepage .jflow .jlist{display:flex; gap:16px; width:max-content; margin:0; padding:0 max(16px, calc((100vw - 1000px) / 2))}
   | .homepage .jflow .jcard{width:360px; flex:none; display:flex; flex-direction:column}
   | .homepage .jflow .jcard .jfoot{margin-top:auto}
   | .homepage .jflow .jcard .jsum{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
   | @keyframes ldb-jflow{from{transform:translateX(0)} to{transform:translateX(-50%)}}
   | .homepage .jflow.run{overflow:hidden}
   | .homepage .jflow.run .jlist{animation:ldb-jflow 30s linear infinite}
   | .homepage .jflow.run:hover .jlist,.homepage .jflow.run:focus-within .jlist{animation-play-state:paused}
   | .homepage .jobsband .fsend{text-align:center; margin-top:22px}
   | @media (max-width:560px){ .homepage .jflow .jcard{width:290px} }
   | @media (prefers-reduced-motion:reduce){ .homepage .jflow.run .jlist{animation:none} }
*/
.homepage .band.jobsband{display:block}
.homepage .jobsband h2{margin:6px 0 0; font-size:clamp(24px, 3.2vw, 36px); line-height:1.3; letter-spacing:-.03em}   /* 他の節の見出し（.homepage .sechead h2）と同じ大きさ */
.homepage .jbar{display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; margin:18px 0 30px}
.homepage .jbar > p{margin:0; flex:1 1 360px; color:var(--fg-sub)}
.homepage .jnav{display:flex; gap:8px}
.homepage .jnav[hidden]{display:none}
.homepage .jnav button{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--fg);
  font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0 0 3px}
.homepage .jnav button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.homepage .jnav button:disabled{opacity:.35; cursor:default}
.homepage .jmore{display:inline-flex; align-items:center; gap:12px; font-weight:700; color:var(--fg); text-decoration:none}
.homepage .jmore i{width:36px; height:36px; border-radius:50%; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-style:normal; font-size:20px; padding-bottom:3px}
.homepage .jmore:hover{color:var(--accent)}
.homepage .jtrack{overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;
  padding:4px 0 10px; scroll-padding-left:max(16px, calc((100vw - 1000px) / 2))}
.homepage .jtrack::-webkit-scrollbar{display:none}
.homepage .jtrack ul{list-style:none; margin:0; display:flex; gap:24px; width:max-content;
  padding:0 max(16px, calc((100vw - 1000px) / 2))}
.homepage .jslide{width:min(440px, 82vw); flex:none; scroll-snap-align:start}
.homepage .jslide a{display:flex; flex-direction:column; height:100%; box-sizing:border-box; background:var(--card); border-radius:var(--r);
  box-shadow:var(--ring); padding:26px 26px 22px; color:var(--fg); text-decoration:none; transition:box-shadow .2s}
.homepage .jslide a:hover{box-shadow:inset 0 0 0 1px var(--accent)}
.homepage .jslide p{margin:0}
.homepage .jst{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.homepage .jst b{font-size:17px; line-height:1.55; letter-spacing:-.01em}
.homepage .jsk{flex:none; background:var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:4px; margin-top:3px}
.homepage .jslide .jss{margin-top:8px; color:var(--fg-sub); font-size:13.5px}
.homepage .jslide .jsp{margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; border-bottom:1px solid var(--line)}
.homepage .jsp span{font-size:24px; font-weight:700; letter-spacing:-.01em}
.homepage .jsp i{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:18px; padding-bottom:3px}
.homepage .jslide a:hover .jsp i{border-color:var(--accent); color:var(--accent)}
.homepage .jslide .jsm{margin-top:14px; color:var(--fg-sub); font-size:12.5px}
#newjobs-empty[hidden]{display:none}
/* 2026-09-25 お仕事一覧のカード：形式の札（クラウドワークスの「固定報酬制」の札に合わせる）。締め切りは日数で出す */
.jform{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:4px; color:var(--accent); background:var(--accent-soft); white-space:nowrap; align-self:center}   /* 2026-09-29 色は :root の変数だけ（design.spec 6）。旧：var(--accent-soft, rgba(16,73,188,.08)) */
.jby{font-variant-numeric:tabular-nums}

/* 2026-09-25 プロフィール編集（働き手）：クラウドワークスと同じ作り。左に会員の設定4項目・右に項目のタブ（基本情報／ワーカー情報／スキル／ポートフォリオ・経歴）＋「ラベル＋入力欄」の行。
   見た目は振込先口座登録（.acct*）を使い、足りない分だけここに足す。📌 根拠：本人「プロフィールの編集画面はクラウドワークスと同様の画面に統一して」 */
.pe-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.pe-head .textlink{font-size:14px}
.pe-tabs{display:flex; flex-wrap:wrap; gap:0; margin:0 0 18px; border-bottom:1px solid var(--line)}
.pe-tabs a{padding:10px 16px; font-size:14px; color:var(--fg-2); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-1px}
.pe-tabs a:hover{color:var(--fg)}
.pe-tabs a[aria-current=page]{color:var(--fg); font-weight:600; border-bottom-color:var(--accent)}
.pe-need{display:block; margin-top:4px; font-size:11px; font-weight:600; color:var(--accent)}
.acct-in textarea, .acct-in input[type=url], .pe-item input{width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); color:var(--fg)}
.acct-in textarea{max-width:none; line-height:1.7}
.acct-in input[type=url], .acct-in #pcatch, .acct-in #pskill{max-width:none}
.pe-item{margin:0 0 12px; padding:12px 14px 14px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--card)}
.pe-item legend{padding:0 6px; font-size:12.5px; color:var(--muted)}
.pe-lb{display:block; font-size:13px; font-weight:600; color:var(--fg); margin:8px 0 4px}
.pe-item .pe-lb:first-of-type{margin-top:0}
@media (max-width:760px){ .pe-tabs a{padding:9px 10px; font-size:13px} }

/* ===== 2026-09-25 仕事を依頼する（7段・クラウドワークスの依頼画面の形）order_cw_body ===== */
.regsteps.oc7 li b{font-size:13px}
.ocai{margin:0 0 14px}
#ocats .octag{font-style:normal; font-size:11px; font-weight:700; color:var(--accent); margin-left:6px}
.occ{display:block; text-align:right; font-size:12px; color:var(--faint); margin-top:4px}
.oclab2{display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:600; margin:18px 0 6px}
.ocbtn{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:14px}
.ocnolab textarea{width:100%}
.ocban{font-size:13px; margin:12px 0 18px}
.ocx{margin:0 0 18px}
.ocx .oclab, .ocrate .oclab{font-weight:600; margin:0 0 8px}
.ocx .picks{display:flex; flex-wrap:wrap; gap:8px}
.ocxin{width:100%}
.ocrate{border:1px solid var(--line); border-radius:10px; background:var(--card); padding:14px 16px; margin:0 0 20px}
.ocrate dl{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 6px}
.ocrate dt{font-size:12px; color:var(--faint)}
.ocrate dd{margin:2px 0 0; font-weight:700}
.oamtby{display:flex; margin:10px 0 6px}
#oamtrange, .ocfix{margin:0 0 4px 28px}
.ocfix input{width:160px}
.ocppl input{width:72px}
#oamtrange.bad, #oamtfix.bad{border-color:var(--err)}
@media (max-width:640px){
  .regsteps.oc7 li b{font-size:10px}
  .ocrate dl{grid-template-columns:1fr}
  #oamtrange, .ocfix{margin-left:0}
}

/* 2026-09-25 本人「先ほどの状態に戻して、今指示した内容だけ」→ LUVIA の型（矢印で送る）をやめ、自動で横に流す形に戻した。上の .jtrack・.jslide・.jbar は使っていない（記録として残す） */
.homepage .jobsband .sechead{max-width:640px; margin-bottom:26px}
.homepage .jobsband .sechead h2{margin:0 0 10px}
.homepage .jflow{overflow-x:auto; padding:6px 0 14px; -webkit-mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent); mask-image:linear-gradient(90deg,transparent,black 4%,black 96%,transparent)}
.homepage .jflow .jlist{display:flex; gap:16px; width:max-content; margin:0; padding:0 max(16px, calc((100vw - 1000px) / 2))}
.homepage .jflow .jcard{width:360px; flex:none; display:flex; flex-direction:column}
.homepage .jflow .jcard .jfoot{margin-top:auto; padding-top:16px}   /* 下の段がタグに重なっていたのを直す */
.homepage .jflow .jcard .jsum{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
@keyframes ldb-jflow{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.homepage .jflow.run{overflow:hidden}
.homepage .jflow.run .jlist{animation:ldb-jflow 30s linear infinite}
.homepage .jflow.run:hover .jlist,.homepage .jflow.run:focus-within .jlist{animation-play-state:paused}
.homepage .jobsband .fsend{text-align:center; margin-top:22px}
@media (max-width:560px){ .homepage .jflow .jcard{width:290px} }
@media (prefers-reduced-motion:reduce){ .homepage .jflow.run .jlist{animation:none} }

/* 2026-09-25 流れる範囲を本文の幅だけに（.jflow を .wrap の中へ）。左端より左へ出たカードは切れて消える。📌 根拠：本人「画面いっぱいに右から左まで流れていたらおかしい」
   旧：画面の幅いっぱい・両端を薄くぼかす（mask-image）・左右の余白 max(16px, calc((100vw - 1000px) / 2)） */
.homepage .jflow{-webkit-mask-image:none; mask-image:none}
.homepage .jflow .jlist{padding:0}

/* 2026-09-25 節が変わるごとに色を変える（白 ⇔ 薄い青を必ず交互に）。📌 根拠：本人「節同士が色がかぶっていたら区別がつかないから、節が変わるごとに色を変えて」
   実測（直す前）：最初の画面 白 → 1行とボタン 白 → 募集中のお仕事 青 → 流れ 青 → 安心 青 → 仕事の例 青 → 最後のボタン 青 → 足元 青（.alt と :nth-of-type(even) が重なっていた）
   今：奇数番目の節＝白・偶数番目＝薄い青。最初の画面(1)白 → 1行とボタン(2)青 → お仕事(3)白 → 流れ(4)青 → 安心(5)白 → 例(6)青 → 最後のボタン(7)白 → 足元 青 */
.homepage > section.band:nth-of-type(odd){background:var(--bg)}
.homepage > section.band:nth-of-type(even){background:var(--ground)}

/* 2026-09-25 募集中のお仕事の消える所（本文の幅の左右の端）をぼかす。📌 根拠：本人「消える所の境目はぼかす感じで」
   旧（同日）：mask-image:none（くっきり切れる） */
.homepage .jflow{-webkit-mask-image:linear-gradient(90deg,transparent 0,black 64px,black calc(100% - 64px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,black 64px,black calc(100% - 64px),transparent 100%)}

/* 2026-09-25 流れる範囲の右端を、本文の右端から画面の右端まで広げる（左端は本文の線のまま）。📌 根拠：本人「もう少し右の方まで表示されているように」
   旧（同日）：本文の幅だけ（183〜1183px・1366pxの画面）。はみ出た分は節で切る（overflow-x:clip） */
.homepage .band.jobsband{overflow-x:clip}
.homepage .jflow{margin-right:calc(50% - 50vw)}

/* 2026-09-25 会員の設定4画面（プロフィール編集・自分の公開ページを確認・本人確認用書類提出・振込先口座登録）を同じ枠にそろえる。
   📌 根拠：本人「プロフィール編集と振込先口座登録に寄せて」「統一感と、ブレがないように」。公開ページは本人が見るときだけこの枠 */
.acct-main.mp{padding:0}
.acct-main.mp .mp-top{margin-top:4px}
.acct-main .mp-grid{grid-template-columns:170px minmax(0,1fr); gap:26px}
.vf-main .rform{background:var(--ground); border-radius:var(--r); box-shadow:var(--ring); padding:22px 28px 26px; margin-top:8px}
.vf-main .afterform2{font-size:16px; margin:22px 0 10px}
.vf-main #idst{margin:0 0 6px}
@media (max-width:760px){ .vf-main .rform{padding:16px} .acct-main .mp-grid{grid-template-columns:1fr} }
.vf-main .afterform2{border-top:0; padding-top:0}
.vf-main .rform input[type=date]{display:block; width:100%; max-width:240px; box-sizing:border-box; font:inherit; font-size:15px; padding:10px 12px; margin-top:6px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); color:var(--fg)}

/* 2026-09-25 最後のボタンの節：枠線（角丸の内側の線）を消し、見出しを他の節と同じ大きさに。📌 根拠：本人「なおして」（トップの点検で、そこだけ枠が浮く・見出しが小さいと指摘）
   旧：box-shadow:inset 0 0 0 1px（どこかの共通の枠の設定が当たっていた）・border-radius:12px・見出しは h2 の標準の大きさ */
.homepage .band.endcta{box-shadow:none; border-radius:0}
.homepage .endcta h2{font-size:clamp(24px, 3.2vw, 36px); line-height:1.3; letter-spacing:-.03em; margin:0 0 22px}

/* 2026-09-25 プロフィール編集を1画面に（節ごとにカード＋見出し、ボタンは下に1つで画面の下に貼りつく）。📌 根拠：本人「これは1つの画面に統一、そして洗練して」 */
.pe-form .pe-sec{margin:0 0 16px; padding:22px 28px 14px}
.wrap .pe-h2{font-size:16px; margin:0 0 6px; padding:0 0 12px; border-bottom:1px solid var(--line-2)}
.pe-send{position:sticky; bottom:0; z-index:2; display:flex; justify-content:flex-end; padding:14px 0; margin-top:4px;
  background:linear-gradient(to top, var(--bg) 70%, transparent)}
.pe-bad{border-left:3px solid var(--err)}   /* 2026-09-29 旧：#c0392b（--err と同じ色） */
/* 自分の公開ページを確認：左の4項目の下に、アイコン・評価などの情報。📌 根拠：本人「この部分をサイドバーの下に」 */
.acct-col{min-width:0}
.acct-col .mp-side{margin-top:16px; padding:18px 16px; background:var(--card); border-radius:var(--r); box-shadow:var(--ring)}
.acct-col .mp-av{max-width:96px; margin:0 auto}
@media (max-width:760px){ .pe-form .pe-sec{padding:16px 16px 8px} .pe-send{justify-content:stretch} .pe-send .cta{width:100%} }
/* 2026-09-25（3）節の灰色の箱をやめ、見出しと下線だけで区切る。📌 根拠：本人「基本情報とかの四角いグレーの箱はいらないかも」
   旧：.pe-form .pe-sec は .acct-form の面（var(--ground)・枠線）を使っていた */
.pe-form .pe-sec{background:none; box-shadow:none; border-radius:0; padding:0; margin:0 0 30px}
.wrap .pe-form .pe-h2{font-size:17px; padding:0 0 10px; margin:0 0 8px; border-bottom:1px solid var(--line)}
@media (max-width:760px){ .pe-form .pe-sec{padding:0} }
/* 2026-09-25（4）カテゴリなどの選択肢の囲いをやめ、チェックと文字だけにする（ステータス・稼働時間も同じ形でそろえる）。
   📌 根拠：本人「スキルの部分のそれぞれのカテゴリの囲いもいらないかな」。旧：.acct-radios .check の白い面と枠（振込先口座登録は今のまま） */
.pe-form .acct-radios{gap:10px 22px; padding-top:9px}
.pe-form .acct-radios .check{background:none; box-shadow:none; border:0; padding:0; gap:8px}
.pe-form .acct-radios .check input{margin-top:4px}
/* 2026-09-25（5）編集と公開ページを1対1に：編集の節の見出しの横に「公開ページのどこに出るか」、公開ページにひとことアピール・働き方・作品・職歴 */
.pe-where{margin-left:10px; font-size:12px; font-weight:500; color:var(--muted)}
.mp-catch{text-align:center; font-size:12.5px; color:var(--fg-2); margin:4px 0 0; line-height:1.5}
.mp-work{margin-top:0}
.mp-url{margin:0 0 10px; word-break:break-all}
.mp-li-sub{font-size:13.5px; color:var(--fg-2); line-height:1.7}

/* 2026-09-25 最後の節の見出しを上下2段に。📌 根拠：本人「上下にして、そして、もう少し洗練された感じに」
   上：小さく・字間を広げ・差し色、両脇に細い線／下：最初の画面と同じ明朝体（.homepage h1.split と同じ書体・太さ500）で大きく。余白を広げて静かに見せる
   旧（同日）：<h2> 1行・ゴシック 36px・下の余白 22px。節の上下 72px */
.homepage .band.endcta{padding:112px 0 120px}
.homepage .endcta h2.endh{margin:0 0 40px; font-size:inherit; letter-spacing:0}
.homepage .endh .e1{display:inline-flex; align-items:center; gap:14px; font-size:13px; font-weight:700; letter-spacing:.32em; color:var(--accent);
  padding-left:.32em}
.homepage .endh .e1::before,.homepage .endh .e1::after{content:""; width:36px; height:1px; background:currentColor; opacity:.5}
.homepage .endh .e2{display:block; margin-top:18px; font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-weight:500; font-size:clamp(36px, 5.4vw, 64px); line-height:1.2; letter-spacing:.06em; color:var(--fg)}
.homepage .endcta .hbact .cta{min-width:200px; padding-top:15px; padding-bottom:15px}
@media (max-width:560px){ .homepage .band.endcta{padding:80px 0 88px} .homepage .endcta .hbact .cta{min-width:0; flex:1 1 140px} }

/* 2026-09-25 マイページ：左に自分のカード＋会員の設定（済んでいない印）、右にタブ。会員のときだけ2段組み（.mp.has-side）
   📌 根拠：本人「クラウドワークスとここなら（ココナラ）を見比べて、明らかに修正するべきところは全て修正」。左の欄はクラウドワークスのマイページ（プロフィール情報）、
     印はココナラの【C】未対応の設定項目。並びと見た目は会員の設定4画面の左（.acct-side）と同じ */
.mp.has-side{display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start}
.mp-main, .mp-side{min-width:0}
.mp.has-side .mp-main > .tabs{margin-top:0}
.mp-card{display:flex; gap:12px; align-items:center; background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:14px 16px; margin:0 0 12px}
.mp-card b{display:block; font-size:15px; color:var(--fg); overflow-wrap:anywhere}
.mp-card span:not(.mp-av){display:block; font-size:12px; color:var(--faint); margin-top:2px; overflow-wrap:anywhere}
.mp-av{flex:0 0 40px; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-weight:600}
.mp-set a{display:flex; justify-content:space-between; align-items:center; gap:8px}
.mp-bd{flex:0 0 auto; font-size:11px; line-height:1; padding:4px 7px; border-radius:999px; font-weight:600}
.mp-bd.ng{color:var(--err); background:var(--err-soft)}
.mp-bd.wait{color:var(--accent); background:var(--accent-soft)}
.mp-bd.ok{color:var(--ok); background:var(--ok-soft)}
@media (max-width:760px){ .mp.has-side{grid-template-columns:minmax(0,1fr); gap:16px} }
/* 2026-09-25 タブの直下の最初の見出し（お金の状態・次にやること）の上に、線と空きを出さない。旧：タブの線の下にもう1本の線と約66pxの空き */
.mp .pane > :first-child > .afterform2:first-child, .mp .pane > .afterform2:first-child{margin-top:0; padding-top:0; border-top:0}
/* 2026-09-25 マイページの売上：合計の数字3つ（受け取った報酬／振込予定／お預かり中。企業はお支払い済み／お支払い待ち／お預かり中） */
.mp-sums{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin:0 0 16px}
.mp-sum{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:14px 16px}
.mp-sum span{display:block; font-size:12px; color:var(--faint)}
.mp-sum b{display:block; margin-top:4px; font-size:20px; color:var(--fg); font-variant-numeric:tabular-nums}
.mp-sum.main b{color:var(--pay)}
@media (max-width:560px){ .mp-sums{grid-template-columns:minmax(0,1fr)} }
/* 2026-09-25 マイページの3画面（①一覧 ②取引の詳細 ③応募者）。お手本：Upwork の取引画面・ココナラのトークルーム（現在の状態・今やること） */
.mp-h{font-size:18px; margin:28px 0 12px; letter-spacing:-.01em}
.mp-main > .pane > :first-child .mp-h:first-child, .mp-main > .pane > .mp-back + .mp-deal .mp-h{margin-top:0}
.mp-back{margin:0 0 10px; font-size:14px}
.mp-back a{color:var(--fg-2); text-decoration:none}
.mp-back a:hover{color:var(--accent)}
.mp-seg{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px}
.mp-segb{font:inherit; font-size:14px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--fg-2); cursor:pointer}
.mp-segb.on{background:var(--fg); border-color:var(--fg); color:var(--card); font-weight:600}
.mp-segb .num{margin-left:2px}
.mp-rows{list-style:none; margin:0; padding:0; background:var(--card); border-radius:var(--r); box-shadow:var(--ring); overflow:hidden}
.mp-rows li + li{border-top:1px solid var(--line-2)}
.mp-rows a{display:block; padding:14px 18px; color:inherit; text-decoration:none}
.mp-rows a:hover{background:var(--ground)}
.mp-rows li.none{padding:18px; color:var(--fg-2); font-size:14px}
.mp-r1{display:flex; gap:10px; align-items:center; justify-content:space-between}
.mp-r1 b{font-size:15px; color:var(--fg); overflow-wrap:anywhere}
.mp-r2{margin-top:3px; font-size:13px; color:var(--faint)}
.mp-r3{margin-top:6px; font-size:13px; color:var(--fg-2)}
.mp-r3.mine{color:var(--accent); font-weight:600}
.mp-steps{display:flex; list-style:none; margin:0 0 18px; padding:0; counter-reset:mps}
.mp-steps li{flex:1 1 0; position:relative; text-align:center; font-size:12px; color:var(--faint); padding-top:22px}
.mp-steps li::before{content:""; position:absolute; top:6px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--line); z-index:1}
.mp-steps li + li::after{content:""; position:absolute; top:10px; right:50%; width:100%; height:2px; background:var(--line)}
.mp-steps li.past, .mp-steps li.now{color:var(--fg-2)}
.mp-steps li.past::before, .mp-steps li.past + li::after, .mp-steps li.now::after{background:var(--accent)}
.mp-steps li.now::before{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.mp-steps li.now{color:var(--accent); font-weight:600}
.mp-stop{margin:0 0 18px; color:var(--fg-2)}
.mp-box{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:18px 20px; margin:0 0 14px}
.mp-box h3{font-size:14px; color:var(--faint); font-weight:600; margin:0 0 10px}
.mp-todo{border-left:3px solid var(--accent)}
.mp-todo-line{margin:0 0 8px; font-size:15px}
.mp-todo .actbar{margin:10px 0 0}
.mp-info th{width:110px; text-align:left; font-weight:600; color:var(--fg-2)}
.mp-info td .fhint{margin-left:6px}
.mp-order summary{cursor:pointer; color:var(--accent)}
.mp-links{list-style:none; margin:0 0 14px; padding:0; display:flex; gap:18px; flex-wrap:wrap; font-size:14px}
@media (max-width:560px){ .mp-steps li{font-size:11px} .mp-box{padding:14px} .mp-info th{width:80px} }
.mp-foot{margin-top:28px}
.mp-foot .linkbtn{margin-right:8px}
#refer .afterform2{font-size:14px}

/* 2026-09-25（4）仕事を依頼する：1ページに①〜⑥を縦に全部並べる。上の帯は出さず、本文の頭に見出しだけ。段と段の間は細い線で区切る
   📌 根拠：本人「1つのページに1から6までをすべて縦に並べる形式にする」「発注するの下に仕事を依頼するの帯があるのがなんか違和感」 */
.wrap .ocw-h1{font-size:26px; letter-spacing:-.02em; margin:34px 0 8px}
.ocw-all .ostep{padding:26px 0 30px; border-top:1px solid var(--line)}
.ocw-all .ostep:first-of-type{border-top:0; padding-top:8px}
.ocw-all .ostep h2{margin-top:0}
/* 2026-09-25（同日）働き手と企業を1つの画面に：お金は4つ（受け取った／振込予定／支払った／支払い待ち）、行に自分の立場（受注／発注）の札 */
.mp-sums.four{grid-template-columns:repeat(4, minmax(0,1fr))}
.mp-role{display:inline-block; font-size:11px; line-height:1; padding:3px 6px; margin-right:8px; border-radius:4px; background:var(--ground); color:var(--fg-2); font-weight:600; vertical-align:2px}
@media (max-width:760px){ .mp-sums.four{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* 2026-09-25（7）仕事を依頼する：掲載が完了した画面。印と見出しを真ん中に、下に載ったお仕事の要点・この先の流れ（3段）・入口
   📌 根拠：本人「この完了しました。ページはもう少し、ちゃんと作って欲しい」 */
.odone{max-width:720px; margin:40px auto 64px}
.odone-head{text-align:center; margin-bottom:26px}
.odone-mark{display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:var(--accent); color:var(--on-accent); margin-bottom:14px}   /* 2026-09-29 旧：color:#fff */
.wrap .odone-head h2{font-size:24px; margin:0 0 8px; letter-spacing:-.02em}
.odone-head p{margin:0; color:var(--fg-2)}
.odone-job{background:var(--ground); border-radius:var(--r); box-shadow:var(--ring); padding:20px 24px}
.odone-lab{margin:0 0 4px; font-size:12.5px; color:var(--muted)}
.odone-title{margin:0 0 12px; font-size:17px; font-weight:600; color:var(--fg)}
.odone-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 18px; margin:0}
.odone-meta dt{font-size:12.5px; color:var(--muted)}
.odone-meta dd{margin:2px 0 0; font-size:14px; color:var(--fg)}
.odone-mail{margin:12px 0 0}
.wrap .odone-h3{font-size:16px; margin:30px 0 12px}
.odone-flow{list-style:none; counter-reset:od; margin:0; padding:0; display:grid; gap:10px}
.odone-flow li{counter-increment:od; position:relative; padding:12px 14px 12px 50px; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--card)}
.odone-flow li::before{content:counter(od); position:absolute; left:14px; top:12px; width:24px; height:24px; border-radius:50%; background:var(--ground); box-shadow:var(--ring);
  font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; color:var(--accent)}
.odone-flow b{display:block; font-size:14.5px; color:var(--fg)}
.odone-flow span{display:block; font-size:13.5px; color:var(--fg-2); line-height:1.7; margin-top:2px}
.odone-act{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:30px}
.odone-sub{text-align:center; margin:16px 0 0; display:flex; justify-content:center; gap:22px; flex-wrap:wrap; font-size:14px}
@media (max-width:560px){ .odone-meta{grid-template-columns:1fr} .odone-act .cta{width:100%; text-align:center} }
/* 2026-09-25（8）完了の画面は読み上げのために箱へ移るだけなので、枠線（フォーカスの線）を出さない */
.odone:focus{outline:none}

/* ================================================================ 仕事の詳細（work?id=）をクラウドワークスの募集ページの形に（2026-09-29）
 * 📌 根拠：本人「クラウドワークスの募集ページ①②③④を参考にして、クラウドワークスの形式に合わせてほしい」
 * 左に本文（780px）・右に付いてくるボタン（200px）。見出しは下に太い線（クラウドワークスの「仕事の概要」と同じ）。差し色は --accent の1色のまま */
.cwd{padding-top:18px; padding-bottom:48px}   /* 2026-09-29 旧：padding-bottom:96px（下に固定の「似た仕事を依頼する」の分。外した） */
.cwd-grid{display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:36px; align-items:start}
.cwd-title{font-size:clamp(21px,2.6vw,27px); line-height:1.4; letter-spacing:-.02em; margin:6px 0 0}
.cwd-cat{font-size:12.5px; font-weight:400; color:var(--muted); letter-spacing:0; white-space:nowrap}
.cwd-sub{color:var(--fg-2); margin:6px 0 0}
.cwd-who{display:flex; gap:14px; align-items:center; margin:18px 0 6px}
.cwd-av{flex:none; width:52px; height:52px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:20px}
.cwd-av.lg{width:84px; height:84px; font-size:32px}
.cwd-av.sm{width:26px; height:26px; font-size:12px; margin-right:10px; vertical-align:middle; background:var(--ground); color:var(--fg-2)}
.cwd-name{margin:0; font-weight:700; font-size:15.5px}
.cwd-name a{color:var(--accent)}
.cwd-line{margin:4px 0 0; font-size:13px; color:var(--fg-2); display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center}
.cwd-stars{color:var(--star); letter-spacing:1px; font-size:14px}
.cwd-flag{color:var(--muted)}
.cwd-flag.ok{color:var(--ok)}
.cwd-sec{margin-top:34px}
.wrap .cwd-h{font-size:16px; font-weight:700; color:var(--accent); margin:0 0 14px; padding-bottom:8px;
  border-bottom:1px solid var(--line); position:relative}
.wrap .cwd-h::after{content:""; position:absolute; left:0; bottom:-1px; width:5.2em; height:3px; background:var(--accent)}
.cwd-tbl th{background:var(--ground)}
.cwd-tbl .jpay{font-size:15px}
.cwd-tbl .jby{margin-left:10px; font-size:12.5px; color:var(--muted)}
.cwd-stat{display:flex; flex-wrap:wrap; gap:8px 30px; margin:0}
.cwd-stat > div{display:flex; align-items:baseline; gap:8px}
.cwd-stat dt{font-size:13px; color:var(--fg-2)}
.cwd-stat dd{margin:0; font-size:13px}
.cwd-stat .num{font-size:18px}
.cwd-more{margin:12px 0 0; font-size:13.5px}
.cwd-body h3{font-size:15px; margin:22px 0 6px}
.cwd-body h3:first-child{margin-top:0}
.cwd-body p{margin:0; line-height:1.9; color:var(--fg)}
.cwd-body .fhint{margin-top:22px}
.cwd-feat{margin-top:30px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cwd-flab{margin:0 0 10px; font-size:13.5px; font-weight:700; color:var(--fg-2)}
.cwd-tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.cwd-tags li{font-size:13px; padding:4px 10px; border:1px solid var(--line); border-radius:4px; background:var(--card)}
.cwd-card{display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:24px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--card)}
.cwd-cl{display:flex; justify-content:center}
.cwd-cnum{display:flex; flex-wrap:wrap; gap:10px 36px; margin:16px 0 0; padding-bottom:16px; border-bottom:1px solid var(--line)}
.cwd-cnum > div{display:flex; align-items:center; gap:12px}
.cwd-cnum dt{font-size:12.5px; font-weight:700; color:var(--fg-2)}
.cwd-cnum dd{margin:0; font-size:22px; font-weight:700; line-height:1.2}
.cwd-cnum dd small{font-size:12px; margin-left:2px}
.cwd-cnum .cwd-stars{display:block; font-size:13px}
.cwd-cnote{margin:14px 0 0; font-size:13.5px; color:var(--fg-2); line-height:1.8}
.cwd-clink{margin:12px 0 0; text-align:right; font-size:13.5px}
.cwd-center{text-align:center; margin:22px 0 0}
.cwd-center .cwd-go{display:inline-block; min-width:240px}
.cwd-list{width:100%; border-collapse:collapse; font-size:13.5px}
.cwd-list th{background:var(--ground); font-size:12.5px; font-weight:700; color:var(--fg-2); padding:8px 10px; border:1px solid var(--line); text-align:center}
.cwd-list td{padding:10px; border:1px solid var(--line)}
.cwd-list td.c{text-align:center; white-space:nowrap}
.cwd-list a{color:var(--accent)}
.cwd-empty{color:var(--muted); font-size:13.5px; margin:0}
/* 右のボタン（画面を下げても付いてくる） */
.cwd-side{position:sticky; top:84px}
.cwd-stick{display:flex; flex-direction:column; gap:10px}
.cwd-stick hr{border:0; border-top:1px solid var(--line); margin:6px 0}
.cwd-go{display:block; text-align:center; padding:13px 10px; font-size:15px}
.cwd-done{background:var(--ok-soft); color:var(--ok); font-weight:700; border-radius:var(--r-s)}
.cwd-favf{margin:0}
.cwd-sbtn{display:flex; width:100%; align-items:center; justify-content:center; gap:6px; padding:9px 10px; font:inherit; font-size:13px; font-weight:700;
  color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:var(--r-s); cursor:pointer; text-decoration:none}
.cwd-sbtn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.cwd-sbtn.on{background:var(--accent-soft); color:var(--accent); border-color:var(--accent-ring)}
.cwd-mark{font-size:13px}
/* 画面の下に固定：この仕事に似た仕事を依頼する */
.cwd-bar{position:fixed; left:0; right:0; bottom:0; z-index:20; padding:10px 16px; background:var(--bar-bg); border-top:1px solid var(--line);
  text-align:center; backdrop-filter:saturate(1.4) blur(6px)}
.cwd-like{padding:11px 36px}
/* 応募画面・不満を伝える */
.cwd-apply{max-width:calc(760px + var(--pad-side) * 2)}
.cwd-kinds{border:0; margin:0 0 14px; padding:0}
.cwd-kinds legend{font-weight:700; margin-bottom:8px}
@media (max-width:860px){
  .cwd-grid{grid-template-columns:1fr; gap:24px}
  .cwd-side{position:static; order:-1}
  .cwd-stick{flex-direction:row; flex-wrap:wrap}
  .cwd-stick .cwd-go{flex:1 1 100%}
  .cwd-stick .cwd-favf, .cwd-stick > a.cwd-sbtn{flex:1 1 45%}
  .cwd-stick hr{display:none}
  .cwd-card{grid-template-columns:1fr; padding:18px}
  .cwd-cl{justify-content:flex-start}
}
/* 2026-09-29 mypage#applied などで開くと、応募中の行とタブが上の帯（PC 62px・スマホ 189px）に隠れていた。タブ（高さ約70px）ごと見えるようにずらす。📌 根拠：確認リスト15番の実測 */
#deals .mp-rows{scroll-margin-top:140px}
@media (max-width:640px){ #deals .mp-rows{scroll-margin-top:270px} }
.cwd-mark{display:inline-flex; color:var(--accent)}
/* 2026-09-29 質問・コメント（「不満を伝える」の代わり）。発注者のコメントは左に差し色の線 */
.cwd-cmts{list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--line)}
.cwd-cmt{display:flex; gap:10px; padding:14px 4px; border-bottom:1px solid var(--line)}
.cwd-cmt .cwd-av.sm{margin:2px 0 0}
.cwd-cmt.by-client{background:var(--accent-soft); border-left:3px solid var(--accent); padding-left:10px}
.cwd-cmh{margin:0; font-size:13.5px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}
.cwd-cmh a{color:var(--accent)}
.cwd-badge{font-size:11px; font-weight:700; color:var(--on-accent); background:var(--accent); border-radius:3px; padding:1px 6px}
.cwd-cmb{margin:6px 0 0; font-size:14px; line-height:1.8; color:var(--fg); overflow-wrap:anywhere}
.cwd-cmf{margin-top:6px}
.cwd-cmlogin{margin:4px 0 0; font-size:14px}
/* ---------------- 2026-09-29 取引管理（旧：マイページ）をココナラの取引管理の形に ----------------
   📌 根拠：本人「ココナラの方がやっぱり洗練されているから、それを模倣して欲しい」「色まではココナラに似合わせなくていい」
     お手本：Desktop/このファイル/管理画面.png（白地に見出し1行 → 下線のタブ → 空のときは絵・一文・説明・枠のボタン）
   旧：見出しの帯（背景色・説明の1行）・丸いボタン型のタブ（選ぶと黒く塗る）・空のときは文字1行 */
body:has(.mp-main) header{background:none; border-bottom:0; padding:32px 0 4px}
body:has(.mp-main) header h1{font-size:26px; letter-spacing:-.01em; margin:0}
body:has(.mp-main) header .lead{display:none}
.mp-seg{gap:0; flex-wrap:nowrap; overflow-x:auto; margin:0 0 16px; border-bottom:2px solid var(--line)}
.mp-segb{border:0; border-radius:0; background:none; padding:12px 16px 10px; margin:0 0 -2px; font-size:15px; font-weight:600;
  color:var(--fg-2); border-bottom:3px solid transparent; white-space:nowrap}
.mp-segb:hover{color:var(--accent)}
.mp-segb.on{background:none; border-color:var(--accent); color:var(--accent); font-weight:700}
.mp-segb .num{font-size:12.5px; font-weight:500; color:var(--fg-sub); margin-left:4px}
.mp-segb.on .num{color:var(--accent)}
.mp-rows.is-empty{background:none; box-shadow:none; border-radius:0}
.mp-rows.is-empty li.none{padding:0}
.mp-empty{text-align:center; padding:48px 16px 56px}
.mp-empty-ic{width:64px; height:56px; fill:var(--rule); display:block; margin:0 auto 18px}   /* 色は :root の変数だけ（design.spec 6） */
.mp-empty b{display:block; font-size:18px; color:var(--fg)}
.mp-empty p{margin:8px 0 0; font-size:13px; color:var(--fg-sub)}
.mp-empty-btn{display:inline-block; margin-top:24px; min-width:240px; padding:14px 24px; border:1px solid var(--accent); border-radius:6px;
  color:var(--accent); background:var(--card); font-size:14px; font-weight:700; text-decoration:none}
.mp-empty-btn:hover{background:var(--accent-soft)}
/* 2026-09-29 取引管理の「お金」の見出しも帯（縦線・背景色）を外し、白地に太字だけ（ココナラの白地にそろえる）。旧：.wrap .mp-h の帯 */
.wrap #moneytop .mp-h{border-left:0; background:none; border-bottom:0; padding:0; margin:8px 0 12px; font-size:15px; font-weight:700}
/* 2026-09-29 空のときのボタンが .mp-rows a（行のリンク：横いっぱい・色は親のまま）に負けていたため、指定を強める */
.mp-rows .mp-empty a.mp-empty-btn{display:inline-block; padding:14px 24px; color:var(--accent)}
.mp-rows .mp-empty a.mp-empty-btn:hover{background:var(--accent-soft)}
/* 2026-09-29 プロフィール編集の下に移した「登録の削除」。更新のボタンと離し、目立たせない */
.pe-del{margin:56px 0 0; padding:20px 0 0; border-top:1px solid var(--line)}
.pe-del .sub-h{font-size:15px; margin:0 0 6px}
/* 2026-09-29 右上の「マイページ」のメニュー（取引管理・売上）。アイコンのメニュー（.umenu）と同じ開き方。ログアウト用の区切り線は付けない。スマホは上の帯の項目に出すので隠す */
.mymenu .ubtn{padding:8px 12px}
.mymenu .ulist{min-width:180px}
.mymenu .ulist li:last-child{border-top:0; margin-top:0; padding-top:0}
@media (max-width:640px){ .sitebar .mymenu{display:none} }
/* 2026-09-29（同日）.mymenu を .umenu から切り離したので、開き方だけここで持つ（カーソルを合わせる・キーボードで入る） */
.mymenu{position:relative; flex:none}
.mymenu:hover .ulist,.mymenu:focus-within .ulist{display:block}
.mymenu .mylink{display:block}
/* ---------------- 2026-09-29（同日）取引管理を表の形に・売上管理（ココナラの画像に合わせる） ----------------
   📌 根拠：ココナラのヘルプの画像（取引管理＝5894832867353・5894816275993、売上管理＝218722247・360010406974）。本人「すすめて」
   旧（同日）：1行＝カード（題名の下に受注/発注・相手・金額・納期）・売上は4つの数字を同じ大きさで並べる */
.mp-segb{position:relative}
.mp-badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:700; line-height:1; vertical-align:1px}
.mp-dot{position:absolute; top:10px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.mp-tools{display:flex; justify-content:flex-end; margin:0 0 12px}
.mp-q{width:min(320px,100%); font:inherit; font-size:14px; padding:10px 14px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg)}
.mp-rows .mp-tr,.mp-rows .mp-th{display:grid; grid-template-columns:minmax(0,1fr) 130px 170px 150px; gap:0 16px; align-items:center; padding:16px 18px; position:relative}
.mp-rows .mp-th{padding:10px 18px; background:var(--ground); font-size:13px; font-weight:700; color:var(--fg-2)}
.mp-rows .mp-th + .mp-tr{border-top:0}
.mp-rows .mp-tr[hidden]{display:none}
.mp-rows .mp-tr:hover{background:var(--stripe)}
.mp-rows .mp-tr.upd::before{content:""; position:absolute; left:6px; top:22px; width:7px; height:7px; border-radius:50%; background:var(--accent)}
.mp-rows a.mp-ttl{display:inline; padding:0; font-weight:700; color:var(--fg); font-size:15px}
.mp-rows a.mp-ttl::after{content:""; position:absolute; inset:0}   /* 行のどこを押しても開く */
.mp-rows a.mp-ttl:hover{background:none; text-decoration:underline}
.mp-rows .mp-r2{margin-top:4px}
.mp-c-amt,.mp-c-due{font-size:14px; text-align:center; display:flex; flex-direction:column; gap:2px; align-items:center}
.mp-c-st{text-align:center}
.mp-rows a.mp-inv{display:inline; padding:0; position:relative; z-index:1; color:var(--accent); font-size:13px}
.mp-c-due small{font-size:12px; color:var(--fg-sub)}
.mp-over{font-style:normal; font-size:12px; font-weight:700; color:var(--err)}
.mp-muted{color:var(--fg-sub)}
.mp-sort{font:inherit; font-weight:700; background:none; border:0; padding:0; color:inherit; cursor:pointer}
.mp-stf{display:inline-flex; align-items:center; gap:6px; margin:0}
.mp-stf select{font:inherit; font-size:12.5px; padding:2px 4px; border:1px solid var(--line); border-radius:4px; background:var(--card); color:var(--fg); max-width:90px}
.mp-th > div:not(:first-child){text-align:center}
@media (max-width:760px){
  .mp-rows .mp-th{display:none}
  .mp-rows .mp-tr{grid-template-columns:minmax(0,1fr) auto; gap:8px 12px}
  .mp-c-main{grid-column:1 / -1}
  .mp-c-amt,.mp-c-due{flex-direction:row; flex-wrap:wrap; gap:4px 8px; text-align:left; align-items:baseline}
  .mp-c-st{grid-column:2; grid-row:2 / span 2; align-self:start}
  .mp-tools{justify-content:stretch} .mp-q{width:100%}
}
.mp-sales{margin:0 0 32px}
.wrap .mp-sales-h{font-size:18px; font-weight:700; margin:8px 0 12px; border:0; background:none; padding:0}
.mp-sales-box{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:24px}
.mp-warn{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 20px; margin:0 0 20px; background:var(--accent-soft); border-radius:6px}
.mp-warn span{color:var(--err); font-weight:600; font-size:14px}
.mp-warn a{font-size:14px; white-space:nowrap}
.mp-total{text-align:center; padding:8px 0 20px; border-bottom:1px solid var(--line)}
.mp-total span{display:block; font-size:15px; color:var(--fg-2)}
.mp-total b{display:block; font-size:34px; margin:4px 0 6px; letter-spacing:-.01em}
.mp-total .fhint{margin:0}
.mp-brk{margin:16px 0 0; padding:0}
.mp-brk div{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0}
.mp-brk dt{font-weight:700; font-size:14px} .mp-brk dd{margin:0; font-size:20px; font-weight:700}
/* 2026-10-07 マイページの「AIスキル診断の結果」（mypage?view=shindan・mepane.php）。1件＝左に分野と受けた日、右に点数と結果へのリンク（スマホでも2列のまま）。
   📌 根拠：2026-10-07 本人「マイページに結果、メニューに診断を足す。同時にやって」。箱の形は売上管理（.mp-sales-box）にそろえた */
.sdm-list{list-style:none; margin:0; padding:0; background:var(--card); border-radius:var(--r); box-shadow:var(--ring)}
.sdm-list li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; align-items:baseline; padding:16px 20px; border-top:1px solid var(--line)}
.sdm-list li:first-child{border-top:0}
.sdm-cat{font-weight:700; font-size:15px; color:var(--fg); overflow-wrap:anywhere}
.sdm-score{text-align:right; font-size:13px; color:var(--fg-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.sdm-score b{font-size:22px; color:var(--fg); margin-right:1px}
.sdm-date{font-size:12.5px; color:var(--fg-sub)}
.sdm-go{text-align:right; font-size:14px; font-weight:700; white-space:nowrap}
#sdmine .mp-empty .mp-empty-btn{margin:24px 4px 0}
@media (max-width:760px){ .mp-c-due::before{content:"納品予定："; font-size:12px; color:var(--fg-sub)} :lang(en) .mp-c-due::before{content:"Due: "} }   /* 2026-09-29 スマホは表の見出しを隠すので、列の名前を前に付ける */

/* 2026-09-29 運営画面の試作（ops.php）。上に画面の切り替え（対応待ちの数つき）・節ごとに表 */
.ops{padding-top:20px; padding-bottom:48px}
.ops-h1{font-size:24px; margin:0 0 14px}
.ops-tabs{display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:18px}
.ops-tabs a{padding:7px 12px; border-radius:var(--r-s); font-size:14px; font-weight:700; color:var(--fg-2); text-decoration:none}
.ops-tabs a:hover{background:var(--ground)}
.ops-tabs a.on{background:var(--accent-soft); color:var(--accent)}
.ops-n{display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:var(--err); color:var(--on-accent); font-size:11.5px; text-align:center}
.ops-sec{margin:0 0 30px}
.ops-sec h2{font-size:17px; margin:0 0 6px}
.ops-t{width:100%; font-size:13.5px}
.ops-t td{vertical-align:top}
.ops-t td.c{text-align:right; white-space:nowrap}
.ops-f{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 6px}
.ops-b{font:inherit; font-size:13px; font-weight:700; padding:6px 12px; border-radius:var(--r-s); border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); cursor:pointer}
.ops-b.ng{background:var(--card); color:var(--err); border-color:var(--err)}
.ops-in{font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:var(--r-s); min-width:10em}
.ops-in.sm{min-width:0; width:7em}
.ops-warn{color:var(--err)}
.ops-empty{color:var(--muted); font-size:13.5px; margin:6px 0 0}
.ops-foot{margin-top:30px}
/* 2026-09-29 取引の画面の「進め方」（困ったときの上）。番号つきの4行 */
.mp-how-l{margin:0; padding:0 0 0 1.4em; display:grid; gap:12px}
.mp-how-l li b{display:block; font-size:14.5px}
.mp-how-l li span{display:block; font-size:13.5px; color:var(--fg-2); margin-top:2px}

/* 2026-09-29 振込の案内（取引の画面・入金待ちの間）。lib.php の ldb_payin_html */
.payin{margin:12px 0; padding:14px 16px; border:1px solid var(--accent-ring); border-radius:var(--r-s); background:var(--accent-soft)}
.payin-h{margin:0 0 8px; font-weight:700; color:var(--fg)}
.payin-dl{margin:0; display:grid; gap:6px}
.payin-dl > div{display:grid; grid-template-columns:8em minmax(0,1fr); gap:10px}
.payin-dl dt{font-size:13px; color:var(--fg-2)}
.payin-dl dd{margin:0; font-size:14px; overflow-wrap:anywhere}
@media (max-width:560px){ .payin-dl > div{grid-template-columns:1fr; gap:2px} }

/* 2026-10-01 会員登録の完了（signup?done=1）。依頼の完了 .odone と同じ形で、見出しだけ h1 */
.wrap .odone-head h1{font-size:24px; margin:0 0 8px; letter-spacing:-.02em}

/* 2026-10-01 応募者一覧（取引管理の mypage?job=）：上に募集内容のまとめ、下に1人2段の一覧。📌 根拠：本人「一人ひとりがぶ厚すぎる」 */
.apj{background:var(--ground); border-radius:var(--r); box-shadow:var(--ring); padding:18px 22px; margin:6px 0 26px}
.apj-lab{margin:0 0 2px; font-size:12.5px; color:var(--muted)}
.wrap .apj-title{margin:0 0 12px; font-size:18px}
.apj-meta{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px 16px; margin:0}
.apj-meta dt{font-size:12px; color:var(--muted)}
.apj-meta dd{margin:2px 0 0; font-size:14px; color:var(--fg)}
.apj-link{margin:12px 0 0; font-size:14px}
.wrap .apl-h{font-size:16px; margin:0 0 6px}
.apl-list{list-style:none; margin:12px 0 18px; padding:0; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--card)}
.apl{padding:12px 16px; border-top:1px solid var(--line)}
.apl:first-child{border-top:0}
.apl-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.apl-name{font-weight:700; font-size:15px}
.apl-cats{font-size:13px; color:var(--fg-2)}
.apl-at{font-size:12.5px; color:var(--muted)}
.apl-tag{font-size:11.5px; font-weight:700; padding:2px 7px; border-radius:4px; background:var(--ground); color:var(--fg-2)}
.apl-act{margin-left:auto; display:flex; gap:8px; align-items:center}
.apl-act form{margin:0}
.apl-act .cta{padding:7px 16px; font-size:13.5px}
.apl-more{margin-top:4px}
.apl-more > summary{display:flex; gap:14px; align-items:baseline; cursor:pointer; list-style:none}
.apl-more > summary::-webkit-details-marker{display:none}
.apl-note{flex:1; min-width:0; font-size:13.5px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.apl-open{font-size:13px; color:var(--accent); white-space:nowrap}
.apl-open::before{content:"▸ "}
.apl-more[open] .apl-open::before{content:"▾ "}
.apl-more[open] .apl-note{white-space:normal}
.apl-dl{display:grid; grid-template-columns:7.5em 1fr; gap:6px 12px; margin:10px 0 4px; padding:12px 14px; background:var(--ground); border-radius:var(--r-s); font-size:13.5px}
.apl-dl dt{color:var(--muted)}
.apl-dl dd{margin:0; color:var(--fg); overflow-wrap:anywhere}
@media (max-width:760px){ .apj-meta{grid-template-columns:repeat(2,minmax(0,1fr))} .apl-act{margin-left:0; width:100%} .apl-dl{grid-template-columns:1fr} }
/* 2026-10-01（同日）「応募内容を見る」を枠付きのボタンに。📌 根拠：本人「応募内容を見るがやや気づきにくい」。旧：青い文字だけ（上の .apl-open） */
.apl-more > summary{align-items:center}
.apl-open{display:inline-block; padding:5px 14px; border:1.5px solid var(--accent); border-radius:999px; font-weight:600; font-size:13px; background:var(--card)}
.apl-more > summary:hover .apl-open{background:var(--accent); color:var(--on-accent)}
.apl-more[open] .apl-open{background:var(--accent); color:var(--on-accent)}
/* 2026-10-01（同日）「応募内容を見る」は名前の行に置く文字のボタン（枠なし）。📌 根拠：本人「さきほどの表示の仕方でよい・名前の右か応募時間の右」。旧：枠付きのボタン（すぐ上の .apl-open） */
.apl-open{border:0; padding:0; background:none; border-radius:0; font:inherit; font-size:13px; font-weight:400; color:var(--accent); cursor:pointer}
.apl-open:hover, .apl-open[aria-expanded="true"]{background:none; color:var(--accent); text-decoration:underline}
.apl-open[aria-expanded="true"]::before{content:"▾ "}
.apl-note{margin:4px 0 0; font-size:13.5px; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 2026-10-01（同日）3段の2段目（カテゴリ・スキル・応募日） */
.apl-sub{margin:3px 0 0; display:flex; gap:6px 16px; flex-wrap:wrap; font-size:13px; color:var(--muted)}
.apl-sub span:first-child{color:var(--fg-2)}
.apl-note{margin:3px 0 0}
/* 2026-10-01（同日）1人分を左（3段）＋右下（この方に頼む・やり取り中）の2列に。📌 根拠：本人「この方に頼むとか、やり取り中は右下の方が良いかも」 */
.apl{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px}
.apl > .apl-top, .apl > .apl-sub, .apl > .apl-note{grid-column:1}
.apl > .apl-act{grid-column:2; grid-row:1 / span 3; align-self:end; margin-left:0}
.apl > .apl-body{grid-column:1 / -1}
@media (max-width:760px){ .apl{grid-template-columns:1fr} .apl > .apl-act{grid-column:1; grid-row:auto; margin-top:8px} }
/* 2026-10-01（同日）右下の「応募内容を見る」はボタン、この方に頼むは開いた中身の下 */
.apl-act .apl-open{border:1.5px solid var(--accent); padding:7px 16px; border-radius:var(--r-s); font-size:13.5px; font-weight:600; color:var(--accent); background:var(--card); text-decoration:none}
.apl-act .apl-open:hover, .apl-act .apl-open[aria-expanded="true"]{background:var(--accent); color:var(--on-accent); text-decoration:none}
.apl-act .apl-open::before, .apl-act .apl-open[aria-expanded="true"]::before{content:none}
.apl-hire{display:flex; justify-content:flex-end; gap:8px; margin:10px 0 4px}
.apl-hire form{margin:0}
/* 2026-10-01（同日）ghost dark の色に負けていたので強める（開いたときに文字が薄く読みにくかった） */
.apl .apl-act .cta.apl-open{border:1.5px solid var(--accent); color:var(--accent); background:var(--card); box-shadow:none}
.apl .apl-act .cta.apl-open:hover{background:var(--ground)}
.apl .apl-act .cta.apl-open[aria-expanded="true"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
/* 2026-10-01（同日）応募者ひとりの応募のページ（mypage?job=&app=） */
.apd{max-width:820px}
.wrap .apd-name{margin:2px 0 4px; font-size:20px}
.apd .apl-dl{margin-top:14px}
.apd .apl-hire{justify-content:flex-start; margin:16px 0 12px}
/* 2026-10-01 取引の画面の「契約を申し込む」を大きなボタンに（押すと発注書の入力が開く）。📌 根拠：本人「クラウドワークスみたいなボタンにしてほしい」 */
details.hire-big > summary{list-style:none; text-align:center; padding:6px 0 4px}
details.hire-big > summary::-webkit-details-marker{display:none}
details.hire-big > summary b.cta{display:inline-block; margin:0; padding:14px 48px; font-size:16px; border-radius:var(--r-s)}
details.hire-big > summary span{margin-top:8px}
details.hire-big[open] > summary b.cta{background:var(--ground); color:var(--fg); box-shadow:var(--ring)}
/* 2026-10-01 取引の画面の「今やること」の外の囲いを外す（中のボタンと入力欄だけ残す）。📌 根拠：本人「今やることの大枠の囲いがいらない」。旧：.mp-box の白い枠＋左の青い線 */
.mp-box.mp-todo{background:none; box-shadow:none; border:0; border-left:0; padding:4px 0 6px}
/* 2026-10-01（同日）応募のページ：左に今回の依頼内容、右に応募した人。下に「この方に依頼する」 */
.apd-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:6px 0 18px}
.apd-box{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:16px 18px; min-width:0}
.apd-box .apl-dl{grid-template-columns:6.5em 1fr}
.apd-hire{background:var(--ground); border-radius:var(--r); padding:18px 20px; margin:0 0 16px}
.wrap .apd-hire h4{margin:0 0 10px; font-size:16px}
.apd-hire .fsend{text-align:center; margin-top:12px}
.apd-hire .fsend .cta{padding:13px 44px; font-size:15.5px}
.apd-done{background:var(--ground); border-radius:var(--r); padding:14px 18px; margin:0 0 16px; font-size:14px}
@media (max-width:760px){ .apd-cols{grid-template-columns:1fr} }
/* 2026-10-01 発注書・依頼の「納品・提供の期日」の欄が見出しの横に詰まっていた（02_一連の流れ 3「欄の崩れ」）→ 見出しの下に幅いっぱいで */
.rform .frow label > input[type=date], .hireform .frow label > input[type=date]{display:block; width:100%; margin-top:6px; padding:10px 12px; font:inherit; border:1px solid var(--line-2); border-radius:var(--r-s); background:var(--card); box-sizing:border-box}
/* 2026-10-01（同日）応募のページを縦に：上＝依頼の内容（公開の仕事のページの見た目）／下＝応募した人／一番下にオレンジの「この方に依頼する」 */
.apd-job{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:20px 24px; margin:6px 0 18px}
.wrap .apd-job .cwd-title{font-size:22px; margin:2px 0 10px}
.wrap .apd-h{font-size:15px; margin:16px 0 8px}
.apd-app{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:20px 24px; margin:0 0 18px}
.apd-tbl th{width:8em}
.cta.cta-orange{background:var(--orange); color:var(--on-accent); box-shadow:none}
.cta.cta-orange:hover{background:var(--orange-dk); color:var(--on-accent)}
.apd-hire .fsend .cta.cta-orange{padding:15px 56px; font-size:16.5px}
/* 2026-10-01 「募集を閉じる」は右下の赤い文字、押した先の確かめのページ */
.apl-close{text-align:right; margin:8px 0 0; font-size:14px}
.apl-close a{color:var(--danger); text-decoration:underline}
.apd-closepg{background:var(--card); border-radius:var(--r); box-shadow:var(--ring); padding:22px 26px; max-width:720px}
.wrap .apd-closepg h3{margin:0 0 6px; font-size:19px}
.apd-closel{margin:12px 0 18px; padding-left:1.2em; font-size:14px; line-height:1.9}
.cta.cta-danger{background:var(--danger); color:var(--on-accent); box-shadow:none}
.cta.cta-danger:hover{background:var(--danger-dk); color:var(--on-accent)}
/* 2026-10-01 お仕事一覧の札：募集中＝緑・終わったもの＝黒。📌 根拠：本人「募集中は右上ぐらいに緑いろ、時間で終了したものや取りやめたものは黒色」 */
.jkind.open{background:var(--open-green); color:var(--on-accent)}
.jkind.end{background:var(--ink-black); color:var(--on-accent)}
/* 2026-10-01 取引の画面の一番下「困ったとき：トラブルの申し立て」を1行に（説明の文は出さない） */
.mp-help1{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13.5px; color:var(--muted)}
.mp-help1 li > span{display:none}
.apl-close.done{color:var(--muted)}
/* 2026-10-01 確かめのページ（完了にする・募集を閉じる）を真ん中に。📌 根拠：本人「確認ページが中央ではなくやや左」 */
.apd-closepg{margin-left:auto; margin-right:auto}
.apd-closepg .fsend{text-align:center}
/* 2026-10-01 完了の画面では、左上の「取引管理」の見出しを出さない（真ん中の完了の印と見出しだけにする）。📌 根拠：本人「取引が完了しましたと取引管理へ戻るの中央がずれている」 */
body:has(.mp-fin) > header, main:has(.mp-fin) header{display:none}
/* 2026-10-01 完了の画面の評価（星を押して選ぶ）。📌 根拠：本人「完了しましたと同時に評価できるように」 */
.fin-rate{max-width:720px; margin:22px auto 0; padding:18px 22px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); text-align:center}
.fin-rate-h{margin:0 0 6px; font-weight:700; font-size:15.5px}
.fin-stars{display:inline-flex; flex-direction:row-reverse; gap:4px; margin:2px 0 10px}
.fin-stars input{position:absolute; opacity:0; width:1px; height:1px}
.fin-stars label{font-size:34px; line-height:1; color:var(--line-2); cursor:pointer; transition:color .1s}
.fin-stars label:hover, .fin-stars label:hover ~ label, .fin-stars input:checked ~ label{color:var(--star)}
.fin-stars input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.fin-rate input[type=text]{display:block; width:100%; max-width:480px; margin:0 auto 8px; padding:10px 12px; font:inherit; border:1px solid var(--line-2); border-radius:var(--r-s); box-sizing:border-box}
.fin-rate .fhint{margin:0 0 10px}
/* 2026-10-16 完了の画面の「このサイトの改善点」（任意）。評価の一言の欄と同じ幅・同じ枠。📌 根拠：本人 2026-10-16「このサイトを利用するときのその改善点を書いてほしい」 */
.fin-rate .fin-note{display:block; max-width:480px; margin:6px auto 12px; text-align:left}
.fin-rate .fin-note span{display:block; margin:0 0 6px; font-weight:700; font-size:14px}
.fin-rate .fin-note small{font-weight:400; color:var(--muted)}
.fin-rate .fin-note textarea{display:block; width:100%; padding:10px 12px; font:inherit; border:1px solid var(--line-2); border-radius:var(--r-s); box-sizing:border-box; resize:vertical}
.fin-stars-done{margin:0; font-size:28px; color:var(--star); letter-spacing:2px}
/* 2026-10-16（2回目）完了の画面を2枚に。1枚目＝印がはねて出て、チェックが描かれ、見出しと1行が下から浮かぶ（達成感）。ボタンは「評価する」1つ。
   2枚目（評価）は入力の欄を左ぞろえ（見出しも左）。📌 根拠：本人 2026-10-16「取引が完了しましたと出て、達成感を感じるを演出。そのあとに評価」「全部中央ぞろえになっているのもやや違和感」 */
.mp-fin1 .odone-mark{animation:fin-pop .55s cubic-bezier(.2,.9,.3,1.35) both}
.mp-fin1 .odone-mark path{stroke-dasharray:24; stroke-dashoffset:24; animation:fin-draw .45s .4s ease-out forwards}
.mp-fin1 h2{animation:fin-up .5s .55s both}
.mp-fin1 .odone-head p{animation:fin-up .5s .7s both}
.mp-fin1 .mp-fin-act, .mp-fin1 .odone-sub, .mp-fin1 .odone-act{animation:fin-up .5s .85s both}   /* 2026-10-16 .odone-act（掲載が完了しましたのボタン）を足した。旧：.mp-fin-act と .odone-sub だけ */
@keyframes fin-pop{0%{transform:scale(0); opacity:0} 100%{transform:scale(1); opacity:1}}
@keyframes fin-draw{to{stroke-dashoffset:0}}
@keyframes fin-up{0%{transform:translateY(10px); opacity:0} 100%{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.mp-fin1 *, .mp-fin1 .odone-mark{animation:none!important} .mp-fin1 .odone-mark path{stroke-dashoffset:0}}
.mp-fin-act{text-align:center; margin:28px 0 6px}
.mp-fin-act .cta{min-width:240px}
.mp-rate{max-width:640px; margin:8px 0 0}
.mp-rate h2{margin:0 0 4px; font-size:22px}
.mp-ratefield{display:block; margin:22px 0 0}
.mp-ratelab{display:block; margin:0 0 8px; font-weight:700; font-size:14.5px}
.mp-ratelab .req{margin-left:6px; font-size:11.5px; color:var(--req-fg); font-weight:700}
.mp-ratelab .opt{margin-left:6px; font-size:11.5px; color:var(--muted); font-weight:400}
.mp-rate .fin-stars{margin:0}
.mp-rate input[type=text], .mp-rate textarea{display:block; width:100%; padding:10px 12px; font:inherit; border:1px solid var(--line-2); border-radius:var(--r-s); box-sizing:border-box; background:var(--card)}
.mp-rate textarea{resize:vertical}
.mp-rate .fhint{margin:8px 0 0}
.mp-ratesend{margin:26px 0 0; text-align:right}
/* 2026-10-16（3回目）評価のページは中央ぞろえに（欄の幅は520pxまで）。📌 根拠：本人 2026-10-16「評価が左揃えになっているけれども中央でいいと思う」。旧：左ぞろえ（.mp-rate の margin:8px 0 0・.mp-ratesend の text-align:right） */
.mp-rate{margin:8px auto 0; text-align:center}
.mp-rate .mp-rateform{max-width:520px; margin:0 auto}
.mp-rate .mp-ratesend{text-align:center}
/* 2026-10-16（4回目）まとまり（520px）はページの中央、中の見出し・欄・文は左ぞろえ。送るは欄と同じ幅。📌 根拠：本人 2026-10-16「全体としては中央、だけれども中身は左揃えでいいかも」。旧：中の文も中央ぞろえ（すぐ上の3行） */
.mp-rate{max-width:520px; text-align:left}
.mp-rate .mp-ratesend{text-align:left}
.mp-rate .mp-ratesend .cta{display:block; width:100%}
body:has(.mp-rate) main > .wrap > h1, main:has(.mp-rate) .mp-back{text-align:left}
.mp-fin1 .odone-head .fin-stars-done{margin:4px 0 8px; color:var(--star); font-size:30px; animation:fin-up .5s .65s both}
.mp-ratesend .cta{min-width:160px}
.fin-stars label{color:var(--star-off)}   /* 2026-10-01 選ぶ前の星が薄すぎて見えにくかった */
/* 2026-10-01 見本の札（ワーカー一覧・見本のプロフィール）。📌 根拠：本人「見本は見本であることを表示させておこう。一応」 */
.wdemo{display:inline-block; vertical-align:2px; margin-left:6px; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:700; line-height:1.4; color:var(--fg-2); background:var(--ground); box-shadow:inset 0 0 0 1px var(--line-2)}
.wdemo-note{margin:4px 0 10px; font-size:13px; color:var(--muted)}

/* 2026-10-01 上で使う色の変数（色は :root の中だけ・tests/design の6）。オレンジ＝「この方に依頼する」、赤＝取り消し・閉じる、緑と黒＝お仕事一覧の募集中と終わったもの、金＝評価の星 */
:root{--orange:#e8610a; --orange-dk:#c95206; --danger:#c62828; --danger-dk:#a31f1f; --open-green:#1f8a4c; --ink-black:#222; --star:#f2b01e; --star-off:#c9d1dc}
/* 2026-10-01 応募画面（段の帯・行・受け取り金額・確認の画面・完了の画面の段の帯）。📌 根拠：本人「応募の画面がすごいたんぱく」→ クラウドワークスの応募画面に寄せる */
.aps{list-style:none; display:flex; margin:6px 0 20px; padding:0; counter-reset:aps}
.aps li{flex:1; position:relative; padding:10px 8px 10px 18px; font-size:13.5px; font-weight:600; color:var(--muted); background:var(--ground); counter-increment:aps}
.aps li::before{content:counter(aps) ". "}
.aps li + li{margin-left:4px}
.aps li.now{background:var(--accent); color:var(--on-accent)}
.aps li.past{color:var(--fg-2)}
.apf-row{display:grid; grid-template-columns:11em minmax(0,1fr); gap:8px 18px; padding:16px 0; border-top:1px solid var(--line)}
.apf-row:first-of-type{border-top:0}
.apf-lb{margin:6px 0 0; font-weight:700; font-size:14px}
.req.opt{color:var(--muted)}
.apf input[type=text], .apf input[type=url], .apf textarea{width:100%; box-sizing:border-box}
.apf #apamt{width:12em}
.apf-pay{margin:8px 0 0; font-size:14px}
.apf-pay b{font-size:16px}
.apl-fix{margin:6px 0 0; font-size:15px}
.apc-h{font-size:17px; margin:0 0 12px}
.apc-act{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:18px 0 0}
.apd-detail{margin:10px 0 0}
.apd-detail > summary{cursor:pointer; color:var(--accent); font-size:14px}
.apd-conf{background:var(--ground); border-radius:var(--r); padding:18px 20px; margin:0 0 16px}
.wrap .apd-conf h4{margin:0 0 10px; font-size:16px}
.apd-conf .fsend{text-align:center}
/* 2026-10-16 「この方に依頼する」を押して出る確かめの枠（#hireconf）に動き：枠がすっと浮かび、見出し → 中身 → 文 → ボタンの順に出る（完了の画面と同じ fin-up）。
   📌 根拠：本人 2026-10-16「この方に依頼するのところもモーションを入れて」。旧：動きなし（その場で切り替わるだけ） */
.apd-conf:not([hidden]){animation:fin-up .45s cubic-bezier(.2,.8,.3,1) both}
.apd-conf{scroll-margin-top:96px}   /* 2026-10-16 確かめの枠を出したとき、見出しが上に貼りつく案内に隠れないように */
.apd-conf:not([hidden]) > h4{animation:fin-up .45s .12s both}
.apd-conf:not([hidden]) > dl{animation:fin-up .45s .22s both}
.apd-conf:not([hidden]) > .fhint{animation:fin-up .45s .32s both}
.apd-conf:not([hidden]) > .fsend{animation:fin-up .45s .42s both}
@media (prefers-reduced-motion:reduce){.apd-conf, .apd-conf > *{animation:none!important}}
.apl-amt{color:var(--fg); font-weight:700}
@media (max-width:640px){ .apf-row{grid-template-columns:1fr} .aps li{font-size:12px; padding-left:10px} }
/* 2026-10-01 お試し／本契約の札と、お試しのあとに選ぶ2つ。📌 根拠：本人「仮契約を進行中なのか、本契約を進行中なのかがわかるように」「本契約へ進むと、これで終わりにするを選べるように」 */
.kbadge{display:inline-block; vertical-align:1px; margin-left:8px; padding:2px 8px; border-radius:4px; font-size:11.5px; font-weight:700; line-height:1.5}
.kbadge.trial{color:var(--orange-dk); background:var(--card); box-shadow:inset 0 0 0 1.5px var(--orange)}
.kbadge.main{color:var(--accent); background:var(--card); box-shadow:inset 0 0 0 1.5px var(--accent)}
.trial-choice{margin:16px 0 0; padding:18px 20px; border-radius:var(--r); background:var(--ground); text-align:center}
.trial-choice-h{margin:0 0 6px; font-weight:700; font-size:16px}
.trial-choice-f{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:12px 0 0}
.fin-trial{max-width:720px; margin:22px auto 0}
#otrialbox input{width:9em}
/* 2026-10-01 戻す・辞退の小さな欄（辞退する・依頼を取り消す・提出を取り消す・応募を取り下げる） */
.actbar.undo{margin-top:10px; background:none; box-shadow:none; border-top:1px dashed var(--line-2); padding-top:12px}
.actbar.undo b{font-size:13.5px}
.apw{margin:12px 0 0; display:flex; gap:8px; align-items:baseline}
.apw-btn{background:none; border:0; padding:0; font:inherit; font-size:13.5px; color:var(--danger); text-decoration:underline; cursor:pointer}

/* 2026-10-02 依頼の画面④：入力の欄を各選択のすぐ下に・「円」「人」を欄の横に・選択の箱をはみ出させない・その場の誤りは赤い文。
   📌 根拠：本人「1名あたりの契約金額で、辺りが非常に見づらい。円も改行されて変に見える」（10/1 変更の確認 8） */
.rform .ocnum{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:4px 0 4px 28px}
.rform .ocnum input{width:180px; flex:none; margin:0}
.rform .ocppln{margin-left:0}
.rform #oppl{width:110px; font-family:var(--sans); font-size:15px; padding:12px 14px; border:0; border-radius:var(--r-s); background:var(--card); box-shadow:var(--ring); color:var(--fg)}
.rform #oamtrange{display:block; width:auto; min-width:220px; max-width:calc(100% - 28px); margin:4px 0 4px 28px}
.rform .ocx .fhint.err{color:var(--err); margin:2px 0 6px 28px; font-weight:600}
.rform #opplerr{margin-left:0}
.rform .ocnum input.bad, .rform #oppl.bad{box-shadow:inset 0 0 0 1.5px var(--err); background:var(--err-soft)}
@media (max-width:640px){
  .rform .ocnum, .rform #oamtrange, .rform .ocx .fhint.err{margin-left:0}
  .rform #oamtrange{max-width:100%}
}

/* 2026-10-02 取引の画面「今やること」の見出しの右の一言（入金の段：下記の振込先口座にお支払いください。）（10/1 変更の確認 26） */
.mp-todo-sub{margin-left:12px; font-size:14px; color:var(--fg-2, inherit)}
@media (max-width:640px){ .mp-todo-sub{display:block; margin:4px 0 0} }

/* 2026-10-02 取引の画面：お試し ─ 本契約 の横棒（お試しの間は本契約を薄く・注意書き）（10/1 変更の確認 27） */
.mp-round{display:flex; gap:10px; margin:4px 0 18px}
.mp-rd{flex:1 1 0; font-size:13px}
.mp-rd-bar{display:block; height:8px; border-radius:4px; background:var(--line); margin-bottom:6px}
.mp-rd.now .mp-rd-bar{background:var(--accent)}
.mp-rd.past .mp-rd-bar{background:var(--accent); opacity:.45}
.mp-rd.now b{color:var(--fg)}
.mp-rd.past b{color:var(--fg-2)}
.mp-rd.later{opacity:.45}
.mp-rd.later b{color:var(--faint)}
.mp-rd-note{display:block; margin-top:2px; font-size:12px; color:var(--faint)}

/* 2026-10-02 「お試し（仮契約）とは」の説明（応募の画面・取引の画面）（10/1 変更の確認 27） */
.trial-about{background:var(--accent-soft); border-radius:var(--r-s); padding:10px 14px; margin:0 0 10px; font-size:13.5px}
.trial-about-h{font-weight:700; margin:0 0 4px}
.trial-about ul{margin:0; padding-left:1.2em}
.trial-about li{margin:2px 0}
.trial-about-d{margin:-8px 0 16px; font-size:13.5px}
.trial-about-d summary{cursor:pointer; color:var(--accent)}
.trial-about-d .trial-about{margin-top:8px}

/* 2026-10-02 取引の画面の見出しの左「仮契約中／本契約中」（少し大きめ・大きくしすぎない）（10/1 変更の確認 28） */
.mp-h .kbadge.mp-kind{font-size:14px; padding:4px 10px; margin-right:10px; vertical-align:1px}

/* 2026-10-02 運営画面：処理の履歴と番号の一覧を、1件＝細い1行に（はみ出す分は「…」）（10/1 変更の確認 36） */
.ops-log .ops-t{table-layout:fixed}
.ops-log .ops-t th, .ops-log .ops-t td{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-top:5px; padding-bottom:5px; vertical-align:middle}
.ops-log .ops-t th:nth-child(1){width:118px}
.ops-log .ops-t th:nth-child(2){width:66px}
.ops-log .ops-t th:nth-child(3){width:18%}
.ops-log .ops-t th:nth-child(4){width:16%}
.ops-log .ops-t th:nth-child(6){width:140px}
.ops-nolink{margin:0 0 8px}
.ops-nos .ops-t th:nth-child(1){width:64px}
.ops-nos .ops-t th:nth-child(2){width:auto}
.ops-nos .ops-t th:nth-child(3){width:110px}

/* 2026-10-02 依頼画面③：項目ごとの欄（仕事の概要・お願いしたい作業・応募のときに書いてほしいこと など）（10/1 変更の確認 8） */
.rform textarea.odsec{min-height:0}

/* 2026-10-02 応募のページ「業務の内容」の欄を大きく（10行・下に伸ばせる）。📌 根拠：本人「業務の内容について各部分が小さい気がする。もう少し大きく用意した方が入力しやすい」（10/1 変更の確認 16） */
.rform textarea.apd-work{min-height:240px; font-size:15px; line-height:1.7}

/* 2026-10-02 取引管理の一覧の行の左「仮契約中／本契約中」（10/1 変更の確認 27） */
.kbadge.mp-kind{font-size:13px; padding:3px 9px; margin-right:8px}

/* 2026-10-02 売上管理「お預かりと入金の予定」の表と、4つの段の小さな帯（入金→納品→完了→お振り込み）（10/1 変更の確認 34） */
.mp-flow{width:100%; font-size:13.5px}
.mp-flow td{vertical-align:middle}
.mp-mini{display:flex; list-style:none; margin:0; padding:0; gap:4px; white-space:nowrap}
.mp-mini li{font-size:11.5px; padding:2px 7px; border-radius:10px; background:var(--line-2); color:var(--faint)}
.mp-mini li.past{background:var(--accent-soft); color:var(--fg-2)}
.mp-mini li.now{background:var(--accent); color:var(--card); font-weight:700}
/* 2026-10-03 段の下に日付（済んだ日／予定の日）・取引番号・入出金の明細（10/1 変更の確認 34 の2回目） */
.mp-mini li{text-align:center; line-height:1.35}
.mp-mini li small{display:block; font-size:10.5px; font-weight:400; opacity:.85}
.tno{font-size:11px; color:var(--faint); font-weight:400; letter-spacing:.02em; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.mp-stmt{width:100%; font-size:13.5px}
.mp-stmt td{vertical-align:middle}
.mp-stmt td.num{white-space:nowrap}
.mp-stmt td small{display:block; font-size:11px; color:var(--faint)}
/* 2026-10-06 引き出し：申請の履歴の額・日付は1行に（「24,000円」が2行に割れた）。売上金残高の箱の右下に「引き出す」の文字のリンク（主ボタンは増やさない） */
.mp-wd{width:100%; font-size:13.5px}
.mp-wd th, .mp-wd td.num{white-space:nowrap}
/* 2026-10-07 それでも額の列が割れた：.tw td.num の width:48px が効いて列が狭いまま。全部の列を1行にし、列の幅は中身に合わせる。
   スマホ（〜600px）は余白を詰め、日付の年（.wd-y）を隠して、390px の幅でも横にはみ出さない（表の中の横スクロールも出さない）。
   旧：上の1行だけ（.mp-wd th, .mp-wd td.num{white-space:nowrap}）　📌 根拠：2026-10-07 本人が画面で見つけたズレ */
.tw .mp-wd td{white-space:nowrap}
.tw .mp-wd td.num{width:auto}
@media (max-width:600px){
  .tw .mp-wd{font-size:12.5px}
  .tw .mp-wd th, .tw .mp-wd td{padding:10px 8px}
  .mp-wd .wd-y{display:none}
}
.mp-wdlink{margin:12px 0 0; text-align:right; font-size:14px; font-weight:700}

/* 2026-10-02 依頼画面③：雇用・派遣の言葉が入った欄を赤く */
.rform textarea.odsec.bad, .rform #t_title.bad{box-shadow:inset 0 0 0 1.5px var(--err); background:var(--err-soft)}
.rform #oempwarn{margin:4px 0 10px; font-weight:600; color:var(--err)}

/* 2026-10-06 今日のIQ問題（quiz.php・旧の名前：1日1問のAI問題→今日の問題）。色は変数だけ。正解は色だけでなく「正解」の札でも示す
   📌 根拠：2026-10-06 本人決定（お手本＝Wordle・1日1問）。押す所は1画面に1つ（会員登録して答えを見る）、Xでシェアは枠だけのボタン */
.qz{padding-bottom:56px}
.qzlead{font-size:16px; line-height:1.8; color:var(--fg-2); margin:10px 0 0}
.qzmeta{display:block; font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.qzlist{list-style:none; margin:22px 0 0; padding:0}
.qzlist li{border-top:1px solid var(--line)}
.qzlist li:last-child{border-bottom:1px solid var(--line)}
.qzlist a{display:block; padding:16px 4px; color:var(--fg); text-decoration:none}
.qzlist a:hover .qzlq{text-decoration:underline}
.qzlq{display:block; font-size:16px; line-height:1.7; margin-top:4px; overflow-wrap:anywhere}
.qztag{display:inline-block; margin-left:10px; padding:1px 8px; border-radius:var(--r-s); font-size:12px; font-weight:700;
  background:var(--accent-soft); color:var(--accent)}
.qztag.ok{background:var(--ok); color:var(--on-accent); margin-left:auto}
.qzq{font-size:18px; line-height:1.8; color:var(--fg); margin:22px 0 16px; overflow-wrap:anywhere}
.qzch{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px}
.qzch li{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-s); box-shadow:inset 0 0 0 1px var(--line);
  background:var(--card); font-size:16px; line-height:1.6; overflow-wrap:anywhere}
.qzch li.ok{box-shadow:inset 0 0 0 2px var(--ok); background:var(--ok-soft)}
.qzl{flex:none; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:var(--ground); color:var(--fg); font-weight:700}
.qzbox{background:var(--ground); border-radius:var(--r); padding:20px 22px; margin:0 0 18px; line-height:1.8}
.qzbox p{margin:0 0 8px}
.qzbox p:last-child{margin-bottom:0}
.qzbig{font-size:17px; font-weight:700; color:var(--fg)}
.qzans h2{font-size:20px; margin:0 0 8px}
.qzexp{color:var(--fg-2)}
.qzsrc{font-size:13.5px; color:var(--muted); overflow-wrap:anywhere}
.qzlock{text-align:center}
.qzbox .qzgo{margin:16px 0 8px}
.qzmin{font-size:13.5px; color:var(--muted)}
.qzshare{margin:6px 0 0}
/* 2026-10-06（同日）1日に約10問・答えを選ぶ形・得点。📌 根拠：本人決定（1問ずつ選ぶとすぐ正解・答えは1回だけ・総合得点と能力ごとの得点） */
.qzday{margin:28px 0 0}
.qzday h2{font-size:19px; margin:0 0 6px; display:flex; align-items:center; gap:10px}
.qzday h2 .qztag{margin-left:0}
.qzcnt{font-size:13px; font-weight:500; color:var(--muted)}
.qzlist a{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.qzlist .qzlq{flex:1 1 280px; margin-top:0}
.qzno{font-weight:700; font-variant-numeric:tabular-nums; min-width:2.2em}
.qzlv{color:var(--pay); letter-spacing:1px; font-size:13px}
.qzlv0{color:var(--line)}
.qzdone{font-size:12px; font-weight:700; padding:1px 8px; border-radius:var(--r-s); background:var(--err-soft); color:var(--err)}
.qzdone.ok{background:var(--ok-soft); color:var(--ok)}
.qzscore{background:var(--ground); border-radius:var(--r); padding:18px 22px; margin:22px 0 0}
.qzscore h2{font-size:15px; margin:0 0 4px; color:var(--fg-2)}
.qztotal{margin:0 0 10px; font-size:15px}
.qztotal b{font-size:40px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; margin-right:4px}
.qztotal small{color:var(--muted); margin-left:8px}
.qzskills{list-style:none; margin:0 0 10px; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px}
.qzskills li{background:var(--card); border-radius:var(--r-s); padding:10px 12px; box-shadow:inset 0 0 0 1px var(--line); display:flex; flex-direction:column}
.qzskills b{font-size:13px; color:var(--fg-2)}
.qzskills span{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums}
.qzskills small{font-size:12px; color:var(--muted)}
.qzimg{margin:18px 0 0}
.qzimg img{display:block; width:100%; max-width:720px; height:auto; border-radius:var(--r)}
.qzgrid{border-collapse:collapse; margin:0 0 18px; font-variant-numeric:tabular-nums}
.qzgrid caption{text-align:left; font-size:13px; color:var(--muted); padding-bottom:4px}
.qzgrid td{border:1px solid var(--line); padding:8px 16px; text-align:center; font-size:17px; min-width:3em}
.qzform fieldset{border:0; margin:0; padding:0; min-width:0}
.qzform legend{font-size:14px; color:var(--fg-2); margin:0 0 10px; padding:0}
.qzopt{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-s); box-shadow:inset 0 0 0 1px var(--line);
  background:var(--card); font-size:16px; line-height:1.6; cursor:pointer; overflow-wrap:anywhere}
.qzopt:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-soft)}
.qzopt input{width:18px; height:18px; flex:none; accent-color:var(--accent)}
.qzch li.ng{box-shadow:inset 0 0 0 2px var(--err); background:var(--err-soft)}
.qzch li .qztag{margin-left:auto}
.qzch li .qztag + .qztag{margin-left:6px}
.qztag.me{background:var(--fg); color:var(--on-fg)}
.qzgo.left{text-align:left; margin:0 0 14px}
.qzme{font-size:13px; color:var(--muted); margin:10px 0 0}
.qzup{margin:4px 0 14px}
/* .qzkind（種類の札）は今は使っていない（IQ問題だけにした・2026-10-06）。kind を出し直すときのために残す */
.qzkind{display:inline-block; margin-left:10px; padding:1px 8px; border-radius:var(--r-s); font-size:12px; font-weight:700; background:var(--ground); color:var(--fg-2)}
.qzhook{font-size:14px; font-weight:600; color:var(--accent); margin:6px 0 0}
.qzback{margin:18px 0 0}

/* 2026-10-07 本登録・プロフィールのカテゴリ：大枠の見出し（.regboxg・.pe-catg）で区切る。📌 根拠：本人『大枠としての例えば開発とかを選んでから、サブとして、機械学習とかを選べるようにしたい』 */
.regbox .regboxg{margin:6px 0 -4px; font-size:13px; font-weight:700; color:var(--muted)}
.regbox .regboxg:first-child{margin-top:0}
.pe-catg{margin:0 0 4px; font-size:13px; font-weight:700; color:var(--muted)}
.pe-catg ~ .pe-catg{margin-top:12px}
/* 2026-10-13 いちばん上の区分（体と声の仕事・確認と責任・AIの仕事）の見出し（.regboxt・.pe-catt）。グループの見出しより1段強く、上に線で区切る。
   📌 根拠：本人「全体を組み替える」「大枠3つでよい」（2026-10-13） */
.regbox .regboxt{width:100%; margin:14px 0 -2px; padding-top:12px; border-top:1px solid var(--rule); font-size:14px; font-weight:700; color:var(--fg)}
.regbox .regboxt:first-child{margin-top:0; padding-top:0; border-top:0}
.pe-catt{margin:16px 0 6px; padding-top:12px; border-top:1px solid var(--rule); font-size:14px; font-weight:700; color:var(--fg)}
.pe-catt:first-child{margin-top:0; padding-top:0; border-top:0}
.pe-catt + .pe-catg{margin-top:0}

/* 2026-10-07 依頼画面①：大枠 → サブの2段（#ogrpx＝大枠の丸・#ocats＝大枠ごとのサブの箱 .ocatg）。
   📌 根拠：本人『大枠としての例えば開発とかを選んでから、サブとして、機械学習とかを選べるようにしたい』
   旧：#ocats は .picks（7つを1列）。空のときの赤は .picks.bad と同じ見た目にそろえる */
.ocats2 .ocatg{margin:0 0 14px}
.ocats2 .ocatg .picks{display:flex; flex-wrap:wrap; gap:8px}
.ocats2 .ocatg-h{font-weight:600; margin:0 0 8px}
.ocsub-h{font-weight:600; margin:4px 0 8px}
#ogrps{display:flex; flex-wrap:wrap; gap:8px}
/* 2026-10-13 依頼画面①：大枠の丸を、いちばん上の区分（確認と責任・AIの仕事）の小さな見出し（.ogtop）で区切る。📌 根拠：本人「全体を組み替える」「大枠3つでよい」（2026-10-13） */
#ogrps .ogtop{flex-basis:100%; margin:6px 0 -2px; font-size:13px; font-weight:700; color:var(--muted)}
.ocats2.bad, .ogrpx.bad{box-shadow:inset 0 0 0 1.5px var(--err); background:var(--err-soft); border-radius:var(--r-s); padding:10px}

/* 2026-10-07 お仕事一覧の左の「仕事カテゴリ」：大枠（.cwgrp）を見出しの太さで、サブ（.cwsub）を1段下げて並べる。
   📌 根拠：本人『大枠としての例えば開発とかを選んでから、サブとして、機械学習とかを選べるようにしたい』。旧：7つを同じ段で1列 */
.cwjobs .cwcat .cwgrp{margin-top:6px}
.cwjobs .cwcat .cwgrp:first-child{margin-top:0}
.cwjobs .cwcat .cwgrp .chip{font-size:14px; font-weight:700}
.cwjobs .cwcat .cwsub .chip{padding-left:29px; font-weight:400}
/* 2026-10-13 いちばん上の区分（.cwtop。体と声の仕事・確認と責任・AIの仕事）を、グループ（.cwgrp）より1段強い見出しにして、上に線で区切る。
   📌 根拠：本人「全体を組み替える」「大枠3つでよい」（2026-10-13） */
.cwjobs .cwcat .cwtop{margin-top:10px; padding-top:8px; border-top:1px solid var(--cw-line)}
.cwjobs .cwcat .cwtop .chip{font-size:15px; font-weight:700}
.cwjobs .cwcat .cwtop + .cwgrp{margin-top:0}
@media (max-width:760px){
  .cwjobs .cwcat li.cwtop{width:100%}
  .cwjobs .cwcat li.cwgrp{width:100%}
  .cwjobs .cwcat .cwsub .chip{padding-left:22px}
}

/* 2026-10-07 AIスキル診断（shindan.php）。見本（デスクトップ 10-07_AIスキル診断の見本/AIスキル診断_見本.html）の見た目を、サイトの色の変数に置きかえた。
   📌 根拠：2026-10-07 本人決定「5分・8問・選択式・スマホ向け」。見本の朱（#93332a）は旧の差し色なので、今の差し色（--accent）にした。色は :root の変数だけ */
.sd{max-width:520px; margin:0 auto; padding:0 0 32px; color:var(--fg)}
.sdtop{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; color:var(--muted); margin:0 0 10px}
.sdbar{height:6px; background:var(--line-2); border-radius:3px; overflow:hidden; margin:4px 0 18px}
.sdbar i{display:block; height:100%; background:var(--accent); transition:width .3s}
.sd .sdh{font-size:28px; line-height:1.35; margin:8px 0 12px; letter-spacing:0}
.sdh2{font-size:19px; line-height:1.5; margin:4px 0 14px}
.sdlead{color:var(--fg-2); font-size:15px; line-height:1.8; margin:0 0 12px}
.sdpills{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; padding:0; list-style:none}
.sdpills li{border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:13px; background:var(--card)}
.sdcard{border:1px solid var(--line); border-radius:var(--r); padding:16px; background:var(--card); margin:0 0 14px; line-height:1.7}
.sdcard ul, .sdcard ol{padding-left:1.2em; margin:6px 0}
.sdbtn{display:block; width:100%; padding:15px 16px; border-radius:10px; border:0; background:var(--accent); color:var(--on-accent);
  font:inherit; font-size:17px; font-weight:700; text-align:center; text-decoration:none; cursor:pointer; margin:12px 0 0}
.sdbtn:hover{background:var(--accent-dark); color:var(--on-accent)}
.sdbtn:disabled{opacity:.35; cursor:default}
.sdbtn.sub{background:transparent; color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.sdbtn.sdx{background:var(--fg); color:var(--bg)}
.sdopt{display:flex; align-items:center; width:100%; text-align:left; padding:14px; margin:0 0 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--card); color:var(--fg); font:inherit; font-size:16px; line-height:1.5; cursor:pointer}
.sdopt:hover, .sdopt.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.sdopt b{flex:0 0 1.8em; color:var(--accent)}
.sdcat{justify-content:space-between; gap:10px}
.sdcat small{display:block; color:var(--muted); font-size:12px; font-weight:400}
.sd .sdq{background:var(--ground); border-radius:10px; padding:12px 14px; margin:0 0 14px; font-size:15px; font-weight:400; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere}
.sdnote{display:block; font-size:13px; color:var(--muted); margin:10px 0; line-height:1.7}
.sdc{text-align:center}
.sdblur{filter:blur(10px); user-select:none; pointer-events:none}
.sdmail input[type=email]{width:100%; padding:14px; font:inherit; font-size:17px; border:0; border-radius:10px; box-shadow:var(--ring-hi); background:var(--card); color:var(--fg); margin:4px 0 6px}
.sdscore{font-size:52px; font-weight:700; line-height:1; color:var(--fg); font-variant-numeric:tabular-nums}
.sdscore small{font-size:17px; color:var(--muted); font-weight:400}
.sdrow{margin:12px 0 0}
.sdtag{display:inline-block; font-size:12.5px; padding:1px 8px; border-radius:4px; background:var(--accent-soft); color:var(--accent); margin:4px 4px 0 0}
.sdrev{margin-top:18px}
.sdrev h2{font-size:16px; margin:0 0 6px}
.sdrev ol{list-style:none; padding:0; margin:0}
.sdrev li{font-size:14px; border-top:1px solid var(--line-2); padding:8px 0}
.sdrev li .sdnote{margin:2px 0 0}
.sdrev .ok .sdmark{color:var(--ok)}
.sdrev .ng .sdmark{color:var(--err)}
.sdvh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sdsoon{margin:12px 0 0; padding:14px 16px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); text-align:center; font-size:15px}
.sdcheer{min-height:calc(100vh - 160px); min-height:calc(100svh - 160px); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px 0}
.sdemo{font-size:64px; line-height:1.2; animation:sdpop .5s cubic-bezier(.2,1.6,.4,1) both}
.sdbig{font-size:32px; font-weight:700; line-height:1.35; margin:0 0 6px; animation:sdpop .6s cubic-bezier(.2,1.6,.4,1) both}
.sdbig2{font-size:23px; font-weight:700; color:var(--accent); margin:0 0 14px; animation:sdpop .6s .25s cubic-bezier(.2,1.6,.4,1) both}
@keyframes sdpop{0%{transform:scale(.3); opacity:0}100%{transform:scale(1); opacity:1}}
.sddown{margin-top:24px; background:none; border:0; color:var(--muted); font:inherit; font-size:14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px}
.sddown span{font-size:26px; color:var(--accent); animation:sdbob 1.2s ease-in-out infinite}
@keyframes sdbob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.sdgate{min-height:calc(100vh - 40px); min-height:calc(100svh - 40px); padding-top:28px}
.sdgate h2{font-size:21px; margin:0 0 8px}
#sdfx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9}
@media (prefers-reduced-motion:reduce){.sdemo, .sdbig, .sdbig2, .sddown span{animation:none}}

/* 2026-10-07 広告用の入口（広告から来たときだけ /shindan の入口を差し替える）。スマホ第一・濃い紺の地・黄色の見出しとボタン・スマホでは下にボタンを固定。
   📌 根拠：2026-10-07 本人「広告用のLPを作って欲しい。クリックできるように。目立つLP」 */
.sdlp{background:var(--lp-bg); color:var(--lp-fg); border-radius:var(--r); padding:28px 20px 24px; margin:0 0 8px}
.sdlp .sdlpfor{font-size:14px; color:var(--lp-sub); margin:0 0 8px; font-weight:700}
.sd .sdlp .sdlph{font-size:36px; line-height:1.3; color:var(--lp-hi); margin:0 0 18px; font-weight:800; letter-spacing:0}
.sdlpbadges{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 20px}
.sdlpbadges li{background:var(--lp-fg); color:var(--lp-bg); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:800}
.sdlpgo{display:block; width:100%; padding:20px 16px; border:0; border-radius:14px; background:var(--lp-hi); color:var(--lp-on-hi);
  font:inherit; font-size:20px; font-weight:800; line-height:1.3; text-align:center; cursor:pointer; box-shadow:0 6px 0 var(--lp-hi-dark), 0 10px 24px var(--lp-shadow)}
.sdlpgo:hover{background:var(--lp-hi-dark)}
.sdlpgo:active{transform:translateY(3px); box-shadow:0 3px 0 var(--lp-hi-dark)}
.sdlp h2{font-size:19px; color:var(--lp-fg); margin:28px 0 12px}
.sdlpknow{list-style:none; padding:0; margin:0 0 14px; counter-reset:k}
.sdlpknow li{background:var(--lp-bg-2); border-radius:10px; padding:12px 14px 12px 48px; margin:0 0 8px; font-size:16px; font-weight:700; position:relative; counter-increment:k}
.sdlpknow li::before{content:counter(k); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%;
  background:var(--lp-hi); color:var(--lp-on-hi); font-size:14px; line-height:24px; text-align:center}
.sdlpmock{background:var(--card); color:var(--fg); border-radius:12px; padding:16px; margin:0 0 6px}
.sdlpmock p{margin:6px 0 0; font-size:14px}
.sdlpmock .sdblur{filter:blur(7px); display:inline-block}
.sdlpmock .sdscore{font-size:44px}
.sdlpcap{font-size:12px; color:var(--lp-sub); margin:0 0 4px; text-align:center}
.sdlpfact{border-left:4px solid var(--lp-hi); padding:4px 0 4px 12px; margin:24px 0; font-size:15px; line-height:1.8}
.sdlpfact small{display:block; color:var(--lp-sub); font-size:12px}
.sdlpfaq dt{font-weight:800; margin:14px 0 4px; color:var(--lp-hi)}
.sdlpfaq dd{margin:0; font-size:14px; line-height:1.8; color:var(--lp-sub)}
.sdlpfix{display:none}
@media (max-width:700px){
  .sdlp{margin:0 -16px 8px; border-radius:0; padding-bottom:110px}
  .sdlpfix{display:block; position:fixed; left:0; right:0; bottom:0; z-index:8; padding:10px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--lp-bg); box-shadow:0 -6px 18px var(--lp-shadow)}
  .sdlpfix .sdlpgo{font-size:18px; padding:16px}
}
@media (prefers-reduced-motion:reduce){.sdlpgo:active{transform:none}}

/* 2026-10-08 ふつうの入口（紺の見出し・4つの力・例題）。広告用の入口と同じ色の変数。📌 根拠：2026-10-08 本人「やりたくなるようなLPではない」「LPも変えておいて」 */
.sdhero{background:var(--lp-bg); color:var(--lp-fg); border-radius:var(--r); padding:24px 20px 22px; margin:0 0 14px}
.sdhero .sdkick{font-size:14px; color:var(--lp-sub); margin:0 0 4px; font-weight:700}
.sd .sdhero .sdh{color:var(--lp-fg); font-size:20px; margin:0 0 4px}
.sdhero .sdcatch{font-size:34px; line-height:1.3; color:var(--lp-hi); font-weight:800; margin:0 0 14px}
.sdhero .sdpills li{background:var(--lp-fg); color:var(--lp-bg); border:0; font-weight:700}
.sdhero .sdgo{background:var(--lp-hi); color:var(--lp-on-hi); font-size:19px; font-weight:800; padding:18px 16px; border-radius:14px; box-shadow:0 6px 0 var(--lp-hi-dark)}
.sdhero .sdgo:hover{background:var(--lp-hi-dark); color:var(--lp-on-hi)}
.sd4{list-style:none; padding:0; margin:8px 0 6px}
.sd4 li{display:flex; gap:8px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.6}
.sd4 li:first-child{border-top:0}
.sd4 li b{flex:0 0 4.5em; color:var(--accent)}
.sdlp .sdlp4 li{border-top-color:var(--lp-bg-2); color:var(--lp-fg); font-size:15px}
.sdlp .sdlp4 li b{color:var(--lp-hi)}
.sdlpex{background:var(--card); color:var(--fg); border-radius:12px; padding:16px; margin:0 0 6px}
.sdexq{font-weight:700; margin:8px 0 6px; line-height:1.6}
.sdexa{list-style:none; padding:0; margin:0 0 6px; counter-reset:x}
.sdexa li{border:1px solid var(--line); border-radius:8px; padding:7px 10px 7px 34px; margin:0 0 6px; font-size:14px; position:relative; counter-increment:x}
.sdexa li::before{content:counter(x, upper-alpha); position:absolute; left:11px; font-weight:800; color:var(--accent)}

/* 2026-10-08（2回目）ふつうの入口：Duolingo English Test の配置（白い地・中央ぞろえ・色は差し色1つ・大きな絵・ボタン1つ・流れの縦の線・くらべ表）。
   旧（同じ日の1回目）の .sdhero（紺の箱）は使わなくなった。📌 根拠：本人「一番良いと思ったのはduolingo」「このLPの配置がきれい」 */
.sdtop2{text-align:center; padding:4px 0 8px}
.sd .sdtop2 .sdh{font-size:15px; font-weight:800; color:var(--accent); margin:0 0 10px; letter-spacing:.04em}
.sdart{display:block; width:100%; max-width:320px; height:auto; margin:0 auto 18px}
.sdart-card{fill:var(--card); stroke:var(--line); stroke-width:1.5; filter:drop-shadow(0 8px 18px var(--sd-art-shadow))}
.sdart-ring0{fill:none; stroke:var(--line-2); stroke-width:12}
.sdart-ring{fill:none; stroke:var(--accent); stroke-width:12; stroke-linecap:round; stroke-dasharray:170 239}
.sdart-q{font-size:40px; font-weight:800; fill:var(--accent)}
.sdart-cap{font-size:11px; fill:var(--muted)}
.sdart-lb{font-size:11px; font-weight:700; fill:var(--fg-2)}
.sdart-bar0{fill:var(--line-2)}
.sdart-bar{fill:var(--accent); opacity:.85}
.sdart-dot{fill:var(--accent); opacity:.18}
.sdart-spark{fill:var(--accent); opacity:.35}
.sdtop2 .sdcatch{font-size:30px; line-height:1.35; font-weight:800; color:var(--fg); margin:0 0 10px}
.sdtop2 .sdsub{font-size:15px; color:var(--muted); margin:0 0 20px}
.sdtop2 .sdgo{font-size:18px; font-weight:800; padding:17px 16px; border-radius:14px; box-shadow:0 5px 0 var(--accent-dark)}
.sdtop2 .sdgo:active{transform:translateY(3px); box-shadow:0 2px 0 var(--accent-dark)}
.sdtop2 .sdpills{justify-content:center; gap:4px 14px; margin:14px 0 30px}
.sdtop2 .sdpills li{border:0; background:none; padding:0; color:var(--muted); font-size:13px}
.sdtop2 .sdpills li::before{content:"✓ "; color:var(--accent); font-weight:800}
.sdbase{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; margin:0 0 34px}
.sdbase p{font-size:12px; color:var(--muted); margin:0 0 10px}
.sdbase div{display:flex; justify-content:center; gap:28px}
.sdbase span{font-size:17px; font-weight:800; color:var(--fg-2); line-height:1.2}
.sdbase small{display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:3px}
.sdh3{font-size:22px; line-height:1.45; margin:0 0 16px}
.sdh3 em{font-style:normal; color:var(--accent)}
.sd4b{display:grid; grid-template-columns:1fr 1fr; gap:10px; list-style:none; padding:0; margin:0 0 36px; text-align:left}
.sd4b li{border:1px solid var(--line); border-radius:14px; padding:14px; font-size:13px; line-height:1.6; color:var(--fg-2)}
.sd4b li b{display:block; font-size:16px; color:var(--accent); margin:0 0 4px}
.sdflow{list-style:none; padding:0 0 0 4px; margin:0 auto 36px; max-width:340px; text-align:left; counter-reset:f}
.sdflow li{position:relative; padding:0 0 22px 46px; counter-increment:f}
.sdflow li::before{content:counter(f); position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-weight:800; line-height:30px; text-align:center}
.sdflow li::after{content:""; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--line)}
.sdflow li:last-child::after{display:none}
.sdflow b{display:block; font-size:17px}
.sdflow small{font-size:13px; color:var(--muted)}
.sdvs{width:100%; border-collapse:separate; border-spacing:0; margin:0 0 26px; font-size:14px}
.sdvs th, .sdvs td{padding:12px 8px; border-bottom:1px solid var(--line)}
.sdvs th{font-size:13px; color:var(--muted); font-weight:700}
.sdvs td:first-child{text-align:left; color:var(--fg-2)}
.sdvs .me{color:var(--accent); font-weight:800; background:var(--sd-me)}
.sdvs th.me{border-radius:12px 12px 0 0}
.sdgo2{margin-top:4px}
/* 2026-10-08 広告用の入口も白い地・中央ぞろえ・差し色1つに（ふつうの入口と同じ）。旧（2026-10-07）の紺の地と黄色の規則は上に残し、ここで上書きする。
   📌 根拠：本人「広告の入口も同じ形にそろえて」 */
.sdlp{background:none; color:var(--fg); border-radius:0; padding:4px 0 8px; text-align:center}
.sdlp .sdlpfor{color:var(--accent); font-size:14px; margin:0 0 10px}
.sd .sdlp .sdlph{font-size:34px; line-height:1.35; color:var(--fg); margin:0 0 10px}
.sdlp .sdsub{font-size:15px; color:var(--muted); margin:0 0 20px}
.sdlpgo{background:var(--accent); color:var(--on-accent); font-size:18px; padding:17px 16px; box-shadow:0 5px 0 var(--accent-dark)}
.sdlpgo:hover{background:var(--accent-dark)}
.sdlpgo:active{box-shadow:0 2px 0 var(--accent-dark)}
.sdlpbadges{justify-content:center; gap:4px 14px; margin:14px 0 30px}
.sdlpbadges li{background:none; color:var(--muted); padding:0; font-size:13px; font-weight:400; border-radius:0}
.sdlpbadges li::before{content:"✓ "; color:var(--accent); font-weight:800}
.sdlpfact{border-left:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 4px; margin:0 0 22px; font-size:14px; color:var(--fg-2)}
.sdlpfact small{color:var(--muted)}
.sdlpfaq{text-align:left; margin:0}
.sdlpfaq dt{color:var(--fg)}
.sdlpfaq dd{color:var(--muted)}
.sdlp h2.sdh3{font-size:22px; color:var(--fg); margin:0 0 16px}
.sdlp .sdlpgo + h2.sdh3{margin-top:40px}
@media (max-width:700px){
  .sdlp{margin:0 0 8px; padding-bottom:110px}
  .sdlpfix{background:var(--bg); box-shadow:0 -1px 0 var(--line), 0 -6px 18px var(--sd-fix-shadow)}
}

/* 2026-10-08 AI エージェントの口（第1段：読むだけ）。📌 根拠：本人『それでいい、1から作って』
   鍵の全文（agentkey）と設定の例（agent）を、写しやすい枠で出す。色は :root の変数だけ */
.ak-code{display:block; margin:10px 0 16px; padding:12px 14px; background:var(--card); box-shadow:var(--ring); border-radius:var(--r);
  font-family:var(--font-num); font-size:13px; line-height:1.6; overflow-x:auto; white-space:pre; color:var(--fg)}
.wrap .ak-code code{font-size:inherit; word-break:normal; white-space:pre}
.wrap code.ak-code{white-space:normal; word-break:break-all; user-select:all}

/* 2026-10-08 アクティブ（急ぎの仕事を受ける・active.php とマイページの札）。本人「アクティブ機能も作っておいて」。
   on／off のボタンはスマホで押しやすく（高さ56px・幅いっぱい）。色は :root の変数だけ */
.dp-switch{background:var(--card); box-shadow:var(--ring); border-radius:var(--r); padding:18px; margin:0 0 18px; text-align:center}
.dp-switch.on{box-shadow:inset 0 0 0 2px var(--ok-ring); background:var(--ok-soft)}
.dp-state{font-weight:700; font-size:18px; margin:0 0 12px; color:var(--fg)}
.dp-btn{display:block; width:100%; max-width:420px; min-height:56px; margin:0 auto 10px; border:0; border-radius:var(--r); font:inherit; font-size:18px; font-weight:700;
  background:var(--accent); color:var(--on-accent); cursor:pointer}
.dp-switch.on .dp-btn{background:var(--card); color:var(--fg); box-shadow:var(--ring-hi)}
.dp-list{list-style:none; margin:0; padding:0}
.dp-job{background:var(--card); box-shadow:var(--ring); border-radius:var(--r); padding:14px 16px; margin:0 0 12px}
.dp-job[data-state=filled]{opacity:.6}
.dp-meta{margin:6px 0; color:var(--fg-2); font-size:14px}
.dp-due b{color:var(--err)}
.dp-ret textarea{width:100%; box-sizing:border-box; font:inherit; margin:4px 0 8px}
.dp-card{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--card); box-shadow:var(--ring);
  border-radius:var(--r); padding:14px 16px; margin:0 0 16px}
.dp-card.on{box-shadow:inset 0 0 0 2px var(--ok-ring); background:var(--ok-soft)}
.dp-card .fhint{margin:4px 0 0}

/* 2026-10-13 ウーバー型の残りの画面（働き手：届く → 受ける → 返す／頼む側：頼む → 状況 → 届いた結果を確かめる）。
   📌 根拠：本人「人を雇うときに uber のタクシー的な感じで、なるべく作業のやり取りとしてやることを限りなく0にした ui にするべき」（2026-10-13）
   色は :root の変数だけ。押す所はスマホで押しやすい高さ（48px 以上）。部品は今あるもの（.key・.cta・.fhint・.check・.acct-radios）に合わせた */
/* 届いた仕事：何をするか・いつまで・いくら・何を返すか */
.dp-h3{font-size:14px; font-weight:700; color:var(--muted); margin:18px 0 8px}
.dp-what{margin:10px 0 12px; display:grid; gap:8px}
.dp-what > div{display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; align-items:start}
.dp-what dt{font-size:12.5px; font-weight:700; color:var(--muted); padding-top:2px}
.dp-what dd{margin:0; font-size:14.5px; line-height:1.7; color:var(--fg); overflow-wrap:anywhere}
.dp-what dd ul{margin:0; padding-left:18px}
.dp-kind{display:inline-block; margin:0 8px 2px 0; padding:1px 8px; border-radius:4px; font-size:12px; font-weight:700; background:var(--accent-soft); color:var(--accent)}
.dp-pay{font-size:17px; font-variant-numeric:tabular-nums; color:var(--pay)}
.dp-raised{font-size:13px; font-weight:600; color:var(--ok); margin-left:6px}
.dp-private ul{margin:6px 0 0; padding-left:18px}
.dp-redo p{margin:6px 0 0}
.dp-ret label{display:block; font-size:13.5px; font-weight:600; color:var(--fg); margin:0 0 8px}
.dp-photo input[type=file]{display:block; width:100%; box-sizing:border-box; margin:6px 0 4px; font:inherit; font-size:14px}
.dp-ret .cta{min-height:48px; min-width:140px}
.dp-result{margin:8px 0; white-space:normal; overflow-wrap:anywhere}
.dp-photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:10px 0}
.dp-photos img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-s); background:var(--ground); box-shadow:var(--ring)}
/* マイページの一番上：届いている仕事・受けた仕事（働き手）／確かめる依頼・進んでいる依頼（頼む側） */
.dp-card.dp-top{display:block}
.dp-tophead{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.dp-topsw{margin:0}
.dp-topsw .cta, #askgo{min-height:48px; min-width:150px; font-size:16px; text-align:center}
.dp-topcols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 0}
.dp-topbox{background:var(--bg); box-shadow:var(--ring); border-radius:var(--r-s); padding:12px 14px; min-width:0}
.wrap .dp-toph{font-size:14px; margin:0 0 6px; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.dp-topn{font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.dp-toplist{list-style:none; margin:0; padding:0}
.dp-toplist li + li{border-top:1px solid var(--line-2)}
.dp-toplist a{display:block; padding:8px 0; text-decoration:none; color:var(--fg)}
.dp-toplist a b{display:block; font-size:14.5px; font-weight:600; overflow-wrap:anywhere}
.dp-toplist a span{display:block; font-size:13px; color:var(--muted)}
.dp-topmore{margin:10px 0 0; font-size:13.5px; text-align:right}
@media (max-width:640px){ .dp-topcols{grid-template-columns:1fr} .dp-topsw, .dp-topsw .cta, #askgo{width:100%} .dp-what > div{grid-template-columns:1fr; gap:2px} }
/* 頼む（ask）：1枚の画面・出した依頼・届いた結果 */
.ask-tabs{display:flex; gap:6px; margin:0 0 16px; border-bottom:1px solid var(--line)}
.ask-tabs a{padding:9px 14px; text-decoration:none; color:var(--muted); font-weight:600; font-size:14.5px; border-bottom:2px solid transparent; margin-bottom:-1px}
.ask-tabs a[aria-current]{color:var(--fg); border-bottom-color:var(--accent)}
.ask-todo a{margin-left:8px}
.ask-step{background:var(--ground); box-shadow:var(--ring); border-radius:var(--r); padding:18px 20px; margin:0 0 14px}
.wrap .ask-h{font-size:16px; margin:0 0 12px; display:flex; gap:10px; align-items:center}
.ask-h span{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent); font-size:13px; font-variant-numeric:tabular-nums}
.ask-top{margin:10px 0 6px; font-size:12.5px; font-weight:700; color:var(--muted)}
.ask-pick.bad{box-shadow:inset 0 0 0 2px var(--err); border-radius:var(--r-s); padding:8px}
.ask-kind{border:0; padding:0; margin:0; min-width:0}
.ask-kind legend{padding:0; font-size:13px; font-weight:700; color:var(--muted); margin:0 0 4px}
.ask-f{margin:14px 0 0}
.ask-lb{display:block; font-size:14px; font-weight:600; color:var(--fg); margin:0 0 6px}
.ask-private{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:4px; font-size:11.5px; font-weight:700; background:var(--ok-soft); color:var(--ok)}
/* 2026-10-14 「直す」の画面を依頼票と同じ5つのまとまりにした：受けた人にだけ見せる項目（.ask-kindp・5. 公開範囲）・自動で入れた値の印（.ask-auto）・公開範囲の1文（.ask-scope）・参考URL の欄（type=url）。
   旧：.ask-f input[type=text], .ask-f input[type=date], .ask-f textarea, … の並びに type=url は無かった */
.ask-kindp{border:0; padding:0; margin:12px 0 0; min-width:0}
.ask-kindp legend{padding:0; font-size:13px; font-weight:700; color:var(--muted); margin:0 0 4px}
.ask-auto{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:4px; font-size:11.5px; font-weight:700; background:var(--accent-soft); color:var(--fg-2)}
.ask-scope{margin:0; font-size:14px; color:var(--fg)}
.ask-note{margin:12px 0 0}
.ask-f .ask-inline{margin:8px 0 0}
.ask-f .ask-inline[hidden]{display:none}   /* 作業に使える時間の「時間で指定」の欄（display:flex が hidden に勝つため） */
.ask-f input[type=text], .ask-f input[type=date], .ask-f input[type=url], .ask-f textarea, .ask-raise input[type=text], .ask-redo textarea{width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--card); color:var(--fg)}
.ask-f input.ask-num, .ask-f input[type=date], .ask-raise input[type=text]{width:auto; max-width:200px; font-variant-numeric:tabular-nums}
.ask-f .fhint{display:block; margin:4px 0 0}
.ask-f.bad input, .ask-f.bad textarea, .ask-f.bad .acct-radios{border-color:var(--err); box-shadow:inset 0 0 0 1px var(--err)}
.ask-f.bad .ask-lb{color:var(--err)}
.ask-form .fsend .cta, .ask-act .cta, .ask-review .cta{min-height:52px; min-width:200px; font-size:17px}
.ask-other{margin:18px 0 0; font-size:14px; color:var(--muted)}
.ask-sheet{background:var(--ground); box-shadow:var(--ring); border-radius:var(--r); padding:18px 20px}
.ask-lead{margin:0 0 12px; font-weight:600; color:var(--fg)}
.ask-dl{margin:0; display:grid; gap:0}
.ask-dl > div{display:grid; grid-template-columns:190px minmax(0,1fr); gap:14px; padding:10px 0; border-top:1px solid var(--line)}
.ask-dl > div:first-child{border-top:0}
.ask-dl dt{font-size:13px; font-weight:700; color:var(--muted)}
.ask-dl dd{margin:0; font-size:14.5px; line-height:1.75; color:var(--fg); overflow-wrap:anywhere}
.ask-dl dd ul{margin:0; padding-left:18px}
.ask-gh{margin:18px 0 4px; padding-top:12px; border-top:2px solid var(--line); font-size:15px; font-weight:700; color:var(--fg)}   /* 2026-10-14 依頼票のまとまりの見出し（仕事の概要・仕事の内容・金額とお支払い・日程・公開範囲） */
.ask-gh:first-of-type{margin-top:0; padding-top:0; border-top:0}
.ask-pay{margin:14px 0; padding:12px 14px; background:var(--card); box-shadow:var(--ring); border-radius:var(--r-s); font-size:14px; line-height:1.8; color:var(--fg-2)}
.ask-act{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.ask-act form{margin:0}
.ask-list{list-style:none; margin:0; padding:0}
.ask-row{background:var(--card); box-shadow:var(--ring); border-radius:var(--r); margin:0 0 10px}
.ask-row.todo{box-shadow:inset 0 0 0 2px var(--accent-ring)}
.ask-row a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 12px; align-items:center; padding:14px 16px; text-decoration:none; color:var(--fg)}
.ask-row a b{font-size:15px; overflow-wrap:anywhere}
.ask-row a .fhint{grid-column:2 / 3; margin:0}
.ask-row .ask-at{grid-column:3; grid-row:1; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.ask-st{display:inline-block; padding:3px 10px; border-radius:4px; font-size:12.5px; font-weight:700; font-style:normal; background:var(--ground); color:var(--fg-2); white-space:nowrap}
.ask-st.returned, .ask-st.max{background:var(--accent); color:var(--on-accent)}
.ask-st.taken, .ask-st.redo, .ask-st.raising{background:var(--accent-soft); color:var(--accent)}
.ask-st.ok{background:var(--ok-soft); color:var(--ok)}
.ask-one{background:var(--card); box-shadow:var(--ring); border-radius:var(--r); padding:18px 20px; margin:0 0 14px}
.ask-state{margin:0 0 8px}
.wrap .ask-title{font-size:19px; margin:0 0 12px; letter-spacing:-.01em; overflow-wrap:anywhere}
.ask-big{font-size:16px; font-weight:600; color:var(--fg); margin:0 0 10px; line-height:1.7}
.ask-result{background:var(--ground); box-shadow:var(--ring); border-radius:var(--r-s); padding:14px 16px; margin:0 0 14px}
.ask-rtext{margin:0; font-size:15.5px; line-height:1.8; color:var(--fg); overflow-wrap:anywhere}
.ask-review{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; margin:0 0 10px}
.ask-review form{margin:0}
.ask-redo{flex:1 1 260px; min-width:0}
.ask-redo summary, .ask-cancel summary, .ask-more summary{cursor:pointer; padding:14px 0; font-weight:600; color:var(--fg-2)}
.ask-redo label{display:block; font-size:13.5px; font-weight:600; margin:0 0 6px}
.ask-redo textarea{margin:0 0 8px}
.ask-raise label{display:block; font-size:14px; font-weight:600; margin:10px 0 6px}
.ask-inline{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0}
.ask-stop{margin:14px 0 0}
.ask-more{margin:0 0 10px; border-top:1px solid var(--line)}
.ask-hist{list-style:none; margin:0; padding:0}
.odone-act#sdone-active{margin-top:0; margin-bottom:-14px}
#sdone-on{min-height:52px; min-width:240px; font-size:17px}
@media (max-width:640px){
  .ask-dl > div{grid-template-columns:1fr; gap:2px}
  .ask-form .fsend .cta, .ask-act .cta, .ask-act form, .ask-review .cta, .ask-review form, #sdone-on{width:100%}
  .ask-row a{grid-template-columns:minmax(0,1fr)} .ask-row a .fhint, .ask-row .ask-at{grid-column:1; grid-row:auto}
}

/* 2026-10-13 新しいトップ（build_work.py の home_human）：入口の2列（頼みたい方／働きたい方）と、値段の目安・期限の選び方の2行。
   色は変数だけ・今までの部品（.flow2・.flow・.fields）の上に足す。根拠：本人の決定（2026-10-13）「人にしかできない仕事を、人に任せる」。旧：この節は無かった */
.homepage .flow2.doors2{grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px}
.homepage .flow2.doors2 ol.flow{grid-template-columns:1fr}
.homepage .doorlinks{margin:12px 0 0}
@media (max-width:760px){ .homepage .flow2.doors2{grid-template-columns:1fr} }
.homepage .homefacts{margin:18px 0 0}
.homepage .homefacts > div{display:grid; grid-template-columns:9em minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.homepage .homefacts dt{font-weight:700; color:var(--fg)}
.homepage .homefacts dd{margin:0; color:var(--fg-2)}
.homepage #homemenu li .fhint{display:block; margin-top:6px}
@media (max-width:560px){ .homepage .homefacts > div{grid-template-columns:1fr; gap:4px} }
/* 2026-10-13 頼む画面：登録の入口（#askgate）・順番待ちの欄（#askwait）の中の間隔。旧：この2行は無かった */
#askgate .fsend, #askwait .fsend{margin:16px 0 8px}
#askgate .ask-title, #askwait .ask-title{margin:12px 0}
/* 2026-10-15 取引中の画面（mypage?t=）を作り直した：納品する・仕事内容・メッセージ（ファイルつき）・契約内容の右下の小さな2つ。
   見た目は今の取引の画面（.mp-box の白い枠・青の差し色1色・灰色の注記）にそろえた。📌 根拠：本人 2026-10-15「前のメッセージの画面はきれいでない。サイトの見た目に合わせて」。旧：この節は無かった（古いやり取りの枠は .mepanel・.msgs・.composer） */
.tr-deliver{margin:10px 0 0}
.tr-deliver > summary{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; cursor:pointer}
.tr-deliver > summary::-webkit-details-marker{display:none}
.tr-deliver > summary .cta{min-height:46px; min-width:160px; text-align:center; box-sizing:border-box}
.tr-deliver > summary .fhint{margin:0}
.tr-deliver[open] > summary .cta{background:var(--card); color:var(--fg); box-shadow:var(--ring-hi)}
.tr-deliver-body{margin:14px 0 0; padding:16px 18px; background:var(--card); box-shadow:var(--ring); border-radius:var(--r)}
.tr-deliver-body label{display:block; font-size:13.5px; font-weight:600; color:var(--fg); margin:0 0 12px}
.tr-deliver-body textarea{display:block; width:100%; box-sizing:border-box; margin:6px 0 0; font:inherit; font-size:14.5px; line-height:1.7; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg); color:var(--fg); resize:vertical}
.tr-deliver-body textarea:focus{outline:0; box-shadow:inset 0 0 0 1.5px var(--accent)}
.tr-file input[type=file]{display:block; width:100%; box-sizing:border-box; margin:6px 0 4px; font:inherit; font-size:14px}
.tr-file .fhint{display:block; font-weight:400}
.tr-send{margin:6px 0 0}
/* 2026-10-16 納品の画面の「戻る」：「提出する」の左に並ぶ白いボタン（線つき）。📌 根拠：本人 2026-10-16「戻るのボタンがみづら過ぎる」。旧：小さな文字のリンク（.mp-back a） */
/* 2026-10-16 「提出する」は右下・「戻る」は左下に分ける。📌 根拠：本人 2026-10-16「提出するは右下が良い」。旧：.tr-dsend{…gap:12px}（2つを左に並べていた） */
/* 2026-10-16 取引の画面の帯（札「本契約中」入り・高さ48px）と、納品の画面の帯「納品する」の太さをそろえる（どちらも48px・文字は縦の真ん中）。
   📌 根拠：本人 2026-10-16「本契約中…と、納品するの帯の太さを統一させて」。旧：納品の画面の帯は約39px（札が無いぶん細かった） */
.wrap .mp-deal .mp-h{min-height:48px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; box-sizing:border-box}
/* 2026-10-16 納品の画面：選んだファイルの名前・数・画像の見本／「提出する」を押したあとの「送っています…」と回る印。📌 根拠：本人 2026-10-16（選んだと分かる・押したらすぐ変わる）。旧：無し */
.tr-picked.on{color:var(--accent); font-weight:700}
.tr-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.tr-thumb{display:flex; flex-direction:column; gap:4px; width:120px; font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.tr-thumb img{width:120px; height:90px; object-fit:cover; border-radius:var(--r-s); box-shadow:var(--ring)}
.tr-thumb{position:relative}   /* 2026-10-16 「×」で外す（本人「複数選べるように」） */
.tr-thumb-x{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; border:0; background:var(--thumb-x-bg); color:var(--thumb-x-fg); font-size:14px; line-height:24px; padding:0; cursor:pointer}
.cta.is-busy{opacity:.85; cursor:progress; display:inline-flex; align-items:center; gap:10px}
/* 2026-10-16 待っている印は、回る輪でなく Claude のように「✻ の印が開いて・閉じて・消えて」をくり返す形にした。
   📌 根拠：本人 2026-10-16「アイコンが消えて、とじて、きえて、閉じてが繰り返されるように」「今ここで左下に表示されているようにね」。
   旧：.tr-spin{width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; animation:trspin .8s linear infinite} */
.tr-spin{display:inline-block; width:1em; text-align:center; font-size:18px; line-height:1}
.tr-spin::before{content:"✻"; display:inline-block; animation:trpulse 1.2s ease-in-out infinite}
@keyframes trpulse{0%{transform:scale(1) rotate(0); opacity:1} 35%{transform:scale(.45) rotate(45deg); opacity:.55} 60%{transform:scale(.15) rotate(90deg); opacity:0} 80%{transform:scale(.6) rotate(135deg); opacity:.7} 100%{transform:scale(1) rotate(180deg); opacity:1}}
.tr-dsend{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; margin-top:20px}   /* 2026-10-16 旧：justify-content:space-between（左に「戻る」があった） */
.tr-backbtn{display:inline-flex; align-items:center; justify-content:center; min-width:120px; padding:12px 22px; border-radius:var(--r-s); box-shadow:var(--ring-hi); background:var(--card); color:var(--fg); font-weight:700; text-decoration:none}
.tr-backbtn:hover{background:var(--ground)}
.tr-send .cta{border:0; cursor:pointer; min-height:46px; min-width:160px}
.tr-work .tr-worktext, .tr-deliv .tr-worktext{margin:0 0 10px; white-space:normal; overflow-wrap:anywhere}
.tr-joblink{margin:8px 0 0; font-size:14px}
.tr-work .dp-try-url{margin:10px 0; padding:10px 12px; background:var(--accent-soft); border-radius:var(--r-s); overflow-wrap:anywhere}
.tr-work .dp-private{margin:10px 0}
.mp-box h3 .tr-at{margin-left:10px; font-weight:400; font-size:12.5px; color:var(--muted)}
.tr-files{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.tr-files li{display:flex; flex-direction:column; gap:2px; max-width:220px; min-width:0; padding:8px 10px; background:var(--ground); box-shadow:var(--ring); border-radius:var(--r-s); font-size:13px}
.tr-files li.gone{color:var(--muted)}
.tr-thumb img{display:block; width:100%; max-width:200px; max-height:140px; object-fit:cover; border-radius:6px; background:var(--bg)}
.tr-fname{overflow-wrap:anywhere; font-weight:600}
.tr-fsize{color:var(--muted); font-size:12px}
.tr-msgs{list-style:none; margin:0 0 12px; padding:4px 2px; max-height:540px; overflow-y:auto}
.tr-day{display:flex; align-items:center; gap:12px; margin:14px 0 10px; color:var(--faint); font-size:12px}
.tr-day::before,.tr-day::after{content:""; flex:1; height:1px; background:var(--line)}
.tr-note{margin:0 0 12px; text-align:center}
.tr-note p{display:inline-block; margin:0; padding:8px 14px; border-radius:var(--r-s); background:var(--ground); color:var(--muted); font-size:12.5px; line-height:1.7; text-align:left; max-width:90%}
.tr-note span{display:block; margin-top:3px; color:var(--faint); font-size:11px}
/* 2026-10-16 吹き出しをやめ、クラウドワークスのメッセージの形に：どちらの発言も左寄せの同じ行（左に頭文字の丸・右に 名前・役割・日時 → 本文 → ファイル）。行の間は細い線。自分の行だけごく薄い地。
   📌 根拠：本人 2026-10-16「見た目などもクラウドワークスなどにそろえてほしい」。
   2026-10-16 旧：.tr-msg{display:flex; margin:0 0 12px} .tr-msg.mine{justify-content:flex-end}
     .tr-bubble{max-width:min(560px, 88%); min-width:0; padding:10px 14px; background:var(--card); box-shadow:var(--ring); border-radius:var(--r)}
     .tr-msg.mine .tr-bubble{background:var(--accent-soft); box-shadow:none}
     .tr-mhead{margin:0 0 4px; display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; font-size:13px}
     .tr-time{color:var(--faint); font-size:12px; margin-left:auto} */
/* 2026-10-16 ココナラのトークルームの直しをまねる：自分の発言は地なし（白）、相手の発言に背景色を付け、背景色だけで「どちらの発言か」が分かるようにする。
   📌 根拠：本人 2026-10-16「どちらからのメッセージかがわかるように」「真似る以外だめ」。ココナラのお知らせ（coconala.com/news/588）「相手のメッセージには背景色を追加し、背景色だけで判別可能になりました」。
   旧：.tr-msg.mine{background:color-mix(in srgb, var(--accent-soft) 45%, transparent)}（自分の行だけごく薄い地） */
.tr-msg{display:flex; align-items:flex-start; gap:12px; margin:0 0 8px; padding:14px 12px; border:1px solid var(--line); border-radius:var(--r-s)}
.tr-msg:not(.mine){background:var(--accent-soft); border-color:transparent}
.tr-msg.mine{background:var(--card)}
/* 2026-10-16 クラウドワークスと同じに、自分の発言は右・相手の発言は左に置く（アイコンは自分なら右端・相手なら左端）。
   📌 根拠：本人 2026-10-16「クラウドワークスは、右が自分左が相手という形になっているよ。だから、それに合わせて」。旧：どちらの発言も左寄せで全幅 */
/* 2026-10-16 旧（この直前の版）：.tr-msg{width:fit-content; max-width:min(640px, 86%)} .tr-msg:not(.mine){margin-right:auto}
     .tr-msg.mine{margin-left:auto; flex-direction:row-reverse} .tr-msg.mine .tr-mhead{justify-content:flex-end}
     （短い文だと枠が小さくなり、右にぎゅうぎゅうに寄っていた）
   2026-10-16 クラウドワークスのメッセージの形をそのまままねる（公式ブログ blog.crowdworks.jp/archives/3663 の「変更後」の画像）：
     枠は欄の幅いっぱいの大きな白い箱・細い水色の線・角はほぼ四角／アイコンは四角い灰色で、箱の外（相手は左・自分は右）／日時は箱の右上（☆つき）／本文は大きめで行間を広く。
     自分の発言は右（アイコンが右・箱は左に少しあける）、相手の発言は左（アイコンが左・箱は右に少しあける）。
   📌 根拠：本人 2026-10-16「メッセージ欄の大きさに対して、自分のメッセージの枠が小さすぎる」「クラウドワークスのやつを調べて…徹底的にパクって」「右が自分左が相手」 */
.tr-msg{width:auto; max-width:none; margin:0 0 14px; padding:0; border:0; border-radius:0; background:none; gap:14px}
.tr-msg:not(.mine){background:none; margin-right:48px}
.tr-msg.mine{background:none; margin-left:48px; flex-direction:row-reverse}
.tr-msg .tr-av.uav{width:48px; height:48px; border-radius:2px; background:var(--msg-av-bg); color:var(--msg-av-fg); font-size:18px; flex:none}
.tr-msg .tr-bubble{flex:1; min-width:0; background:var(--msg-bg); border:1px solid var(--msg-line); border-radius:2px; padding:16px 22px 18px}
.tr-msg .tr-mhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0 0 10px; font-size:13.5px}
.tr-msg .tr-mhead .tr-time{margin-left:auto; color:var(--msg-time); font-size:13px}
.tr-msg .tr-mhead .tr-time::before{content:"☆ "; color:var(--msg-star)}
.tr-msg .tr-mtext{font-size:15px; line-height:1.9; color:var(--msg-text)}
/* 2026-10-16 自分の発言は、箱の中も右に寄せる（名前・役割は右、日時は左に入れ替え、本文とファイルも右寄せ）。
   📌 根拠：本人 2026-10-16「自分の投稿の文字がすごい左寄りなの」。旧：.tr-msg.mine .tr-mhead{justify-content:flex-start}（本文は左寄せ） */
/* 2026-10-16 旧（すぐ前の案・出さずにやめた）：.tr-msg.mine .tr-mhead{flex-direction:row-reverse} .tr-msg.mine .tr-mtext{text-align:right}
   2026-10-16 左右のつり合いをとる：箱の幅を欄の約4分の3にし、自分は右に・相手は左に寄せる（反対側を4分の1あける）。箱の中の文は、どちらも読みやすい左寄せ。
   📌 根拠：本人 2026-10-16「おかしいじゃん」「バランスを考えて」 */
.tr-msg:not(.mine){margin-right:22%}
.tr-msg.mine{margin-left:22%}
.tr-msg.mine .tr-mhead{justify-content:flex-start}
/* 2026-10-16 自分の発言の箱に薄い水色の地を付け、自分の発言だと分かるようにする（相手は白のまま）。
   📌 根拠：本人 2026-10-16「自分の投稿はやや背景を付けたりするとより自分の投稿っぽくなる」。旧：自分の箱も白（#fff） */
.tr-msg.mine .tr-bubble{background:var(--msg-mine)}
/* 2026-10-16 箱の幅は文の長さに合わせる（短い文は小さめ・長い文は欄の約4分の3まで）。小さくなりすぎないよう、箱は少なくとも欄の約4割。
   自分は右寄せ・相手は左寄せのまま。
   📌 根拠：本人 2026-10-16「あいうえおだからそんなにひだりによらなくていい」（短い文でも箱が4分の3の幅で、文が左に離れていた）。
   旧：.tr-msg:not(.mine){margin-right:22%} .tr-msg.mine{margin-left:22%}（箱の幅はいつも欄の約4分の3） */
.tr-msg{width:fit-content; max-width:78%}
.tr-msg:not(.mine){margin-right:auto}
.tr-msg.mine{margin-left:auto}
.tr-msg .tr-bubble{min-width:min(360px, 60vw)}
.tr-av.uav{width:36px; height:36px; font-size:15px}
.tr-bubble{flex:1; min-width:0}
.tr-mhead{margin:0 0 6px; display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; font-size:13.5px}
.tr-mhead b{color:var(--fg)}
.tr-role{color:var(--muted); font-size:12px}
.tr-time{color:var(--faint); font-size:12px}
.tr-mtext{white-space:normal}
.tr-mtext a{overflow-wrap:anywhere}
.tr-msg .tr-files{flex-direction:column; gap:4px}
.tr-msg .tr-files li{flex-direction:row; align-items:center; gap:10px; max-width:none; padding:4px 0; background:none; box-shadow:none}
.tr-msg .tr-thumb img{width:56px; height:56px; max-width:none; object-fit:cover}
/* 2026-10-16 読み直しで戻る（JavaScript が動かないときの送信）とき、上から滑って戻らないように、この画面だけ滑らかなスクロールを止める（html の scroll-behavior:smooth）。旧：無かった */
html:has(.tr-talk){scroll-behavior:auto}
.tr-talk{scroll-margin-top:12px}
.tr-mtext{margin:0; font-size:14.5px; line-height:1.75; overflow-wrap:anywhere}
.tr-orig{margin:4px 0 0}
.tr-empty{padding:18px 0; text-align:center; color:var(--muted); font-size:14px}
.tr-composer{border-top:1px solid var(--line); padding-top:12px}
.tr-composer textarea{display:block; width:100%; box-sizing:border-box; font:inherit; font-size:14.5px; line-height:1.7; padding:10px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg); color:var(--fg); resize:vertical}
.tr-composer textarea:focus{outline:0; box-shadow:inset 0 0 0 1.5px var(--accent)}
.tr-cbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:8px 0 0}
.tr-attach{position:relative; display:inline-flex; align-items:center; padding:8px 14px; border-radius:var(--r-s); box-shadow:var(--ring-hi); font-size:13.5px; font-weight:600; color:var(--fg); cursor:pointer}
.tr-attach:hover{background:var(--ground)}
.tr-attach input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.tr-attach:focus-within{outline:2px solid var(--accent); outline-offset:2px}
.tr-picked{flex:1; min-width:0; font-size:12.5px; color:var(--muted); overflow-wrap:anywhere}
.tr-picked.err{color:var(--err)}
.tr-cbar .cta{border:0; cursor:pointer; margin-left:auto; min-height:42px; min-width:110px}
.tr-chint{margin:8px 0 0; font-size:12.5px}
.tr-contract .tr-corner{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:4px 16px; margin:10px 0 0}
.tr-corner .tr-quit{display:inline; margin:0}
.tr-corner a, .tr-corner .linkbtn{font-size:12.5px; color:var(--muted); text-decoration:underline}
.tr-corner a:hover, .tr-corner .linkbtn:hover{color:var(--fg)}
/* 2026-10-15（2）取引の画面の小さな「納品する」と、納品の画面（mypage?t=&deliver=1）。📌 根拠：本人 2026-10-15「納品するの小さなボタンだけ・押すと別の画面・とてもシンプルに」。旧：この節は無かった（上の .tr-deliver は使わなくなった） */
.tr-dbtn{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:12px 0}
.tr-dbtn .cta{min-height:36px; padding:6px 18px; font-size:14px}
.tr-dbtn .fhint{margin:0}
/* 2026-10-16 取引の画面の「納品する」は、進み具合のすぐ下の枠（青い線・薄い青の地・角丸・左に見出しと期限、右に大きめのボタン）。スマホは縦に並べ、ボタンは横いっぱい。
   📌 根拠：本人 2026-10-16「クラウドワークスの契約詳細の上部に『納品する』がある形にならう」。2026-10-16 旧：上の .tr-dbtn（小さなボタンと残りの日だけ・今は使わない） */
.tr-dnext{display:flex; align-items:center; justify-content:space-between; gap:12px 20px; margin:14px 0 16px; padding:14px 18px;
  border:1.5px solid var(--accent); border-radius:10px; background:var(--accent-soft)}
.tr-dnext-l{min-width:0}
.tr-dnext-h{margin:0 0 4px; font-weight:700; font-size:15.5px; color:var(--fg)}
.tr-dnext-sub{margin:0; font-size:13px; color:var(--muted); line-height:1.7}
.tr-dnext-due{color:var(--fg)}
.tr-dnext-btn.cta{flex:0 0 auto; min-height:46px; min-width:160px; padding:10px 28px; font-size:15.5px; font-weight:700; justify-content:center; text-align:center}
@media (max-width:640px){ .tr-dnext{flex-direction:column; align-items:stretch} .tr-dnext-sep{display:none} .tr-dnext-sub > span{display:block} .tr-dnext-btn.cta{width:100%; min-width:0} }
.tr-dform{margin:12px 0 0}
.tr-dform label{display:block; font-size:13.5px; font-weight:600; color:var(--fg); margin:0 0 12px}
.tr-dform textarea, .tr-dform input[type=text], .tr-dform input[type=url]{display:block; width:100%; box-sizing:border-box; margin:6px 0 0; font:inherit; font-size:14.5px; line-height:1.7; padding:8px 12px;
  border:1px solid var(--line); border-radius:var(--r-s); background:var(--bg); color:var(--fg)}
.tr-dform textarea{resize:vertical}
/* 2026-10-16 納品の画面の欄の上の「頼んだ方が求めていること」（依頼の完了の条件など・箇条書き）。枠は細い線・角丸・地はページと同じ。
   📌 根拠：本人 2026-10-16「形式は同じで、採点方法は相手（頼む側）が決めるものであるべき」。旧：この節は無かった */
.tr-wants{margin:12px 0 4px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:var(--bg)}
.tr-wants h3{margin:0 0 6px; font-size:14.5px; font-weight:700; color:var(--fg)}
.tr-wants ul{margin:0; padding:0 0 0 1.2em; font-size:14px; line-height:1.8; color:var(--fg)}
.tr-wants .fhint{margin:6px 0 0}
.tr-score{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0 0 12px; font-size:13.5px}
.tr-score .check{margin:0; font-weight:400}
/* 2026-10-16 旧：スマホの .tr-bubble{max-width:94%}（吹き出しの幅）を外した。行は全幅 */
@media (max-width:640px){ .tr-msgs{max-height:none; overflow:visible} .tr-cbar .cta{width:100%; margin-left:0} .tr-deliver > summary .cta{width:100%} }

/* 2026-10-16 試し（使ってみて感想を書く）の2つの約束の箱：薄いオレンジの地・オレンジの線・角丸。色はサイトのオレンジ（--pay）。
   📌 根拠：本人 2026-10-16（「使ってみて感想を書く」の応募・受けるときの2つの約束の文・置き場所・見た目・規約） */
.fc-box{background:var(--pay-soft); border:1.5px solid var(--pay); border-radius:10px; padding:12px 14px; margin:4px 0 6px}
.fc-box-h{margin:0 0 8px; font-weight:700; color:var(--pay); font-size:14.5px}
.fc-box .check{display:flex; margin:6px 0}
.fc-box-note{margin:0 0 14px}

/* 2026-10-16 完了しました系のすべてに同じ動き。
   ①全面の完了の画面（.odone：掲載が完了しました・応募が完了しました・会員登録・取引が完了しました・評価を送りました）＝印がはねて出て、チェックが描かれ、見出し・一文・その下が順に浮かぶ（.mp-fin1 と同じ）
   ②完了を知らせる帯（.key.done-note：契約が成立しました・納品しました・応募しました・評価を送りました・コメントを書きました・運営に送りました）＝帯が上から入り、左のチェックの印がはねて出る
   📌 根拠：本人 2026-10-16「応募完了もそう、モーションを入れてほしい、すべての、こういう完了しました系はモーションが欲しい」。旧：動きは .mp-fin1（取引が完了しました・評価を送りました・掲載が完了しました）だけ */
.odone .odone-mark{animation:fin-pop .55s cubic-bezier(.2,.9,.3,1.35) both}
.odone .odone-mark path{stroke-dasharray:24; stroke-dashoffset:24; animation:fin-draw .45s .4s ease-out forwards}
.odone .odone-head h2{animation:fin-up .5s .55s both}
.odone .odone-head p{animation:fin-up .5s .7s both}
.odone > :not(.odone-head){animation:fin-up .5s .85s both}
.key.done-note{position:relative; padding-left:46px; animation:note-in .45s cubic-bezier(.2,.9,.3,1.15) both}
.key.done-note::before{content:""; position:absolute; left:14px; top:50%; margin-top:-11px; width:22px; height:22px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
  animation:fin-pop .5s .2s cubic-bezier(.2,.9,.3,1.35) both}
@keyframes note-in{0%{transform:translateY(-8px); opacity:0} 100%{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.odone *, .odone .odone-mark, .key.done-note, .key.done-note::before{animation:none!important} .odone .odone-mark path{stroke-dashoffset:0}}

/* 2026-10-16 :root の外に直接書いていた色を変数にした（メッセージ欄・ファイルの×・必須の印）。値は同じ。暗い画面は差し替える。
   📌 根拠：design.spec の6「色は :root の中だけ」（夜のテストで落ちた）。旧：各所に #d6d6d6・#a9d6ec・#eaf5fb・#f0a020・#444・#222・#333・#b45309・#1747c8 を直接 */
:root{--msg-bg:#fff; --msg-line:#a9d6ec; --msg-mine:#eaf5fb; --msg-av-bg:#d6d6d6; --msg-av-fg:#fff; --msg-time:#444; --msg-star:#f0a020; --msg-text:#222;
  --thumb-x-bg:#333; --thumb-x-fg:#fff; --req-fg:#b45309}
@media (prefers-color-scheme: dark){
  :root{--msg-bg:#1a2027; --msg-line:#2f4a5c; --msg-mine:#1c2a35; --msg-av-bg:#4a525c; --msg-av-fg:#fff; --msg-time:#a9b4c0; --msg-star:#f0a020; --msg-text:#eef2f7;
    --thumb-x-bg:#555; --thumb-x-fg:#fff; --req-fg:#f0a35a}
}