@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@600;700&display=swap');

/* =========================================================
   結 -yui- サロン内プラットフォーム 画面モック
   共通スタイル v0.2

   ■ デザインの方針
   藍（あい）を基調に、実績・信頼を真鍮色で表す。
   本文は Zen Kaku Gothic New。ふところが広く、小さくしても潰れない。
   実績の数字だけ Zen Old Mincho にして、「記録」としての重みを持たせる。

   ■ 年齢層への配慮（会員の中心が40〜60代）
   - 基準文字サイズ 18px。16px 未満は一切使わない
   - タップできるものは最低 56px 角
   - ナビゲーションは常時見える下部タブ。ハンバーガーは使わない
   - ボタンには必ず文字ラベルを付ける。アイコン単独では使わない
   - 端末の文字サイズを「特大」にしても崩れないよう相対単位で組む
   ========================================================= */

:root {
  /* --- 藍 --- */
  --ai:          #1B5E8C;
  --ai-deep:     #123F60;
  --ai-dark:     #154A6E;
  --ai-light:    #4A8CBA;
  --ai-wash:     #E8F1F8;
  --ai-wash-2:   #D5E6F2;

  /* --- 真鍮（実績・信頼） --- */
  --brass:       #8A6118;
  --brass-light: #B8862C;
  --brass-wash:  #F7F0E1;

  /* --- 文字 --- */
  --ink:         #14222E;
  --ink-soft:    #46596A;
  --ink-faint:   #64798A;
  --on-dark:     #F2F7FB;
  --on-dark-soft:#B9D2E4;

  /* --- 面（白基調。地はほぼ白にして、白い箱を線と影で浮かせる） --- */
  --ground:      #F8FAFC;
  --surface:     #FFFFFF;
  --surface-2:   #F4F7FA;
  --line:        #E2E9EF;
  --line-soft:   #EDF1F5;

  /* --- 状態 --- */
  --ok:          #1B6B4C;
  --ok-wash:     #E2F1EA;
  --warn:        #8C4C0C;
  --warn-wash:   #FAEDDD;

  /* --- 影 --- */
  --sh-1: 0 1px 2px rgba(18,45,66,.05), 0 1px 3px rgba(18,45,66,.04);
  --sh-2: 0 1px 2px rgba(18,45,66,.05), 0 6px 16px -6px rgba(18,45,66,.14);
  --sh-3: 0 2px 4px rgba(18,45,66,.06), 0 16px 32px -14px rgba(18,45,66,.28);
  --sh-ai: 0 2px 6px rgba(27,94,140,.22), 0 8px 20px -8px rgba(27,94,140,.35);

  /* --- 書体 --- */
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;

  --tap: 3.2rem;         /* 約56px */
  --nav-h: 4.6rem;
  --r-sm: 0.6rem;
  --r-md: 0.9rem;
  --r-lg: 1.15rem;
  --radius: 0.9rem;   /* 旧名。login.html の入力欄などが参照している */
  --page: 44rem;
}

/* 白基調で固定する。
   端末がダークモードでも配色を反転させない（会員に見せる画面の印象をそろえるため）。 */
:root { color-scheme: light; }

/* ---------- ベース ---------- */
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .01em;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 1.5rem);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--ai); }
:focus-visible { outline: 3px solid var(--ai-light); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.page { max-width: var(--page); margin: 0 auto; padding: 0 1.1rem; }

/* ---------- 見出し ---------- */
h1 { font-size: 1.5rem; line-height: 1.5; margin: 0; font-weight: 700; letter-spacing: .015em; text-wrap: balance; }
h2 {
  font-size: 1.15rem; line-height: 1.6; font-weight: 700; letter-spacing: .03em;
  margin: 2.4rem 0 1rem; display: flex; align-items: center; gap: .65rem;
}
h2::before {
  content: ""; flex: 0 0 auto; width: .2rem; height: 1.05rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--brass-light), var(--brass));
}
h3 { font-size: 1.05rem; line-height: 1.65; margin: 0 0 .45rem; font-weight: 700; letter-spacing: .02em; }
p  { margin: 0 0 .9em; }
.note { color: var(--ink-soft); font-size: .95rem; line-height: 1.9; }

/* ---------- 上部バー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--sh-1);
}
.topbar-inner {
  max-width: var(--page); margin: 0 auto;
  min-height: var(--tap);
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem 1.1rem;
}
.topbar h1 { font-size: 1.2rem; letter-spacing: .04em; }
.brand {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit; min-width: 0;
}
.brand .kanji {
  font-family: var(--mincho); font-size: 1.2rem; font-weight: 600;
  width: 2.2rem; height: 2.2rem; border-radius: .55rem;
  background: linear-gradient(145deg, var(--ai-light), var(--ai-deep));
  color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: var(--sh-ai);
}
.brand .name {
  font-weight: 700; font-size: 1rem; letter-spacing: .02em; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 26rem) { .brand .name { font-size: .92rem; } }
.back {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: var(--tap); padding: 0 .7rem 0 .35rem; margin-left: -.35rem;
  color: var(--ai); text-decoration: none; font-weight: 700; font-size: 1rem;
  border-radius: var(--r-sm); flex: 0 0 auto; transition: background .15s;
}
.back:hover { background: var(--ai-wash); }

/* ---------- カード ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 1.35rem 1.25rem;
  margin: 0 0 1rem;
}
.card-title {
  font-size: 1.02rem; font-weight: 700; letter-spacing: .02em; margin: 0 0 1rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line-soft);
}
.card-title .sub { font-size: .9rem; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--tap); padding: .5rem 1.5rem;
  font-family: var(--gothic); font-size: 1rem; font-weight: 700; line-height: 1.5;
  letter-spacing: .04em;
  background: linear-gradient(160deg, var(--ai-light) -30%, var(--ai) 55%, var(--ai-dark) 130%);
  color: #fff; border: 0; border-radius: var(--r-md);
  box-shadow: var(--sh-ai); cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.block { display: flex; width: 100%; }
.btn.ghost {
  background: var(--surface); color: var(--ai);
  border: 2px solid var(--ai-wash-2); box-shadow: var(--sh-1);
}
.btn.ghost:hover { background: var(--ai-wash); filter: none; }
.btn.quiet {
  background: var(--surface); color: var(--ink-soft);
  border: 2px solid var(--line); box-shadow: none;
}
.btn.quiet:hover { background: var(--surface-2); filter: none; }
.btn.done {
  background: var(--ok-wash); color: var(--ok);
  border: 2px solid color-mix(in srgb, var(--ok) 35%, transparent);
  box-shadow: none; cursor: default;
}
.btn.done:hover { filter: none; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row .btn { flex: 1 1 10rem; }

/* ---------- ラベル・タグ ---------- */
.tag {
  display: inline-block; font-size: .88rem; font-weight: 500; line-height: 1.75;
  padding: .12rem .75rem; border-radius: 999px;
  background: var(--ai-wash); color: var(--ai);
  border: 1px solid color-mix(in srgb, var(--ai) 14%, transparent);
}
.tag.plain { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
.tag.ok    { background: var(--ok-wash); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.tag.warn  { background: var(--warn-wash); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.tag.brass { background: var(--brass-wash); color: var(--brass); border-color: color-mix(in srgb, var(--brass) 22%, transparent); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }

/* 押せるタグ（絞り込み）は 56px を確保する */
.filter {
  display: flex; flex-wrap: nowrap; gap: .5rem; margin: 0 0 1.1rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem;
  -webkit-overflow-scrolling: touch;
}
.filter::-webkit-scrollbar { display: none; }
.filter a {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  min-height: var(--tap); padding: 0 1.2rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); text-decoration: none;
  font-size: .95rem; font-weight: 700; letter-spacing: .03em;
  box-shadow: var(--sh-1); transition: all .15s;
}
.filter a:hover { border-color: var(--ai-light); color: var(--ai); }
.filter a[aria-current="true"] {
  background: linear-gradient(160deg, var(--ai-light) -30%, var(--ai) 60%);
  border-color: transparent; color: #fff; box-shadow: var(--sh-ai);
}

/* ---------- アバター ---------- */
.av {
  flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mincho); font-weight: 600; color: #fff;
  width: 3rem; height: 3rem; font-size: 1.2rem;
  box-shadow: var(--sh-1);
}
.av.lg {
  width: 5.2rem; height: 5.2rem; font-size: 2.1rem;
  box-shadow: 0 0 0 4px var(--surface), var(--sh-3);
}
.av.sm { width: 2.3rem; height: 2.3rem; font-size: .85rem; box-shadow: 0 0 0 2px var(--surface); }
.a1{background:linear-gradient(145deg,#4A7DA1,#2C5673)}
.a2{background:linear-gradient(145deg,#8B7047,#5E4A2D)}
.a3{background:linear-gradient(145deg,#55886F,#345C4A)}
.a4{background:linear-gradient(145deg,#87607B,#5B3F53)}
.a5{background:linear-gradient(145deg,#996942,#6B482C)}
.a6{background:linear-gradient(145deg,#586A96,#374566)}
.a7{background:linear-gradient(145deg,#77874E,#4F5B33)}
.a8{background:linear-gradient(145deg,#985A5A,#6B3D3D)}

/* 絵文字のアイコン（仮置き。本番は利用者がえらべるようにする想定） */
.av-face {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.35rem; line-height: 1; letter-spacing: 0;
}
.av.lg.av-face { font-size: 2.4rem; }
.av.sm.av-face { font-size: 1.05rem; }

/* アイコンを押すとプロフィールへ */
.av-link {
  display: inline-flex; flex: 0 0 auto; border-radius: 50%;
  text-decoration: none; transition: transform .14s ease, box-shadow .16s ease;
}
.av-link:hover { transform: translateY(-2px); }
.av-link:hover .av { box-shadow: 0 0 0 3px var(--ai-wash), var(--sh-2); }
.av-link:focus-visible { outline-offset: 4px; }

/* アイコンをえらぶ画面 */
.face-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .8rem; }
.face-tabs a {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 .95rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-soft); text-decoration: none; font-size: .93rem; font-weight: 700;
}
.face-tabs a[aria-current="true"] { background: var(--ai); border-color: var(--ai); color: #fff; }
.face-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.face-pick button {
  width: var(--tap); height: var(--tap); padding: 0;
  border: 2px solid var(--line); border-radius: 50%; background: var(--surface);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.face-pick button:hover { transform: scale(1.08); border-color: var(--ai-light); }
.face-pick button[aria-pressed="true"] {
  border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-wash);
}

/* 絞り込みで0件になったとき */
.empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-lg);
  font-size: .97rem; line-height: 1.85;
}

.stack { display: flex; align-items: center; flex-wrap: wrap; }
.stack .av.sm + .av.sm { margin-left: -.65rem; }
.stack .more { margin-left: .8rem; font-size: .95rem; color: var(--ink-soft); font-weight: 500; }

/* ---------- 一覧の行 ---------- */
.row-link {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 1.15rem 1.15rem;
  text-decoration: none; color: inherit;
  margin: 0 0 .75rem; min-height: var(--tap);
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.row-link:hover {
  border-color: var(--ai-wash-2); box-shadow: var(--sh-2); transform: translateY(-2px);
}
.row-link .body { flex: 1; min-width: 0; }
.row-link .name { font-weight: 700; font-size: 1.05rem; line-height: 1.6; letter-spacing: .015em; }
.row-link .meta { font-size: .93rem; color: var(--ink-soft); line-height: 1.75; }

/* ---------- プロフィールの見出し ---------- */
.hero {
  position: relative;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  margin: 0 0 1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
/* 帯は淡い水色。白基調をこわさない程度の色味にとどめる */
.hero-band {
  height: 6.5rem;
  background: linear-gradient(150deg, var(--ai-wash-2) 0%, var(--ai-wash) 55%, var(--surface) 100%);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
}
.hero-band::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 1.6rem 1.6rem;
  mask-image: linear-gradient(200deg, #000 10%, transparent 80%);
  -webkit-mask-image: linear-gradient(200deg, #000 10%, transparent 80%);
}
.hero-body { padding: 0 1.25rem 1.35rem; }
.hero-top {
  display: flex; align-items: flex-end; gap: 1rem;
  margin-top: -2.6rem; margin-bottom: 1rem;
}
.hero-top .av { position: relative; z-index: 1; }
.hero-since {
  flex: 1; min-width: 0; padding-bottom: .5rem;
  font-size: .9rem; font-weight: 700; color: var(--ink-faint); letter-spacing: .04em;
}
.hero h1 { font-size: 1.5rem; }
.hero .role { color: var(--ink-soft); font-size: .98rem; margin: .25rem 0 .8rem; line-height: 1.75; }

/* ---------- 実績の数字 ---------- */
.counts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden;
}
@media (min-width: 34rem) { .counts { grid-template-columns: repeat(3, 1fr); } }
.count {
  background: var(--surface); padding: 1.25rem .8rem 1.1rem; text-align: center;
  position: relative;
}
.count::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--brass-light), transparent);
  opacity: .55;
}
.count .n {
  font-family: var(--mincho); font-weight: 700;
  color: var(--brass);
  font-size: 2.5rem; line-height: 1.1; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.count .n .unit {
  font-family: var(--gothic); font-size: .9rem; font-weight: 500;
  color: var(--ink-faint); margin-left: .15rem;
}
.count .l { font-size: .92rem; color: var(--ink-soft); margin-top: .35rem; letter-spacing: .02em; }

/* ---------- もらった声 ---------- */
.voice {
  display: flex; gap: .9rem;
  padding: 1.15rem 0; border-top: 1px solid var(--line-soft);
}
.voice:first-of-type { border-top: 0; padding-top: 0; }
.voice p {
  margin: 0 0 .4rem; font-size: 1rem; line-height: 1.9;
  position: relative;
}
.voice .from { font-size: .92rem; color: var(--ink-faint); font-weight: 500; }

/* ---------- ★評価（仕事のみ。オフ会には付けない） ---------- */
.rating { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.stars {
  color: var(--brass-light); font-size: 1.35rem; line-height: 1;
  letter-spacing: .12em; white-space: nowrap;
}
.stars.sm { font-size: 1rem; letter-spacing: .08em; }
.score {
  font-family: var(--mincho); font-weight: 700; color: var(--brass);
  font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums;
}

/* ---------- 節目バッジ ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .55rem; }
.badge {
  font-size: .92rem; font-weight: 700; line-height: 1.7; letter-spacing: .02em;
  color: var(--brass);
  background: linear-gradient(150deg, var(--brass-wash), color-mix(in srgb, var(--brass-wash) 60%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--brass) 30%, transparent);
  padding: .35rem 1rem; border-radius: 999px;
  box-shadow: var(--sh-1);
}

/* ---------- オフ会の日付 ---------- */
.ev { display: flex; gap: 1.1rem; }
.ev-date {
  flex: 0 0 4.1rem; text-align: center;
  background: var(--ai-wash); border-radius: var(--r-md);
  padding: .55rem .3rem .5rem; align-self: flex-start;
}
.ev-date .mo { font-size: .85rem; color: var(--ai); font-weight: 700; line-height: 1.4; }
.ev-date .dy {
  font-family: var(--mincho); font-weight: 700; color: var(--ai-deep);
  font-size: 2rem; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.ev-date .wd { font-size: .85rem; color: var(--ink-faint); line-height: 1.4; }
.ev-body { flex: 1; min-width: 0; }

/* ---------- 金額 ---------- */
.price {
  font-family: var(--mincho); font-variant-numeric: tabular-nums;
  font-size: 1.2rem; font-weight: 700; color: var(--brass);
  white-space: nowrap; letter-spacing: .01em;
}

/* ---------- 検索 ---------- */
.search {
  display: flex; align-items: center; gap: .65rem;
  min-height: var(--tap); padding: 0 1.1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--sh-1);
  color: var(--ink-faint); font-size: 1rem; font-weight: 500;
  margin: 0 0 1.2rem; text-decoration: none; transition: all .15s;
}
.search:hover { border-color: var(--ai-light); color: var(--ai); box-shadow: var(--sh-2); }
.search:focus-within { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-wash); }
.search-input {
  flex: 1; min-width: 0; min-height: var(--tap);
  border: 0; background: none; outline: none;
  font-family: var(--gothic); font-size: 1rem; color: var(--ink);
}
.search-input::placeholder { color: var(--ink-faint); }

/* ---------- 補足の囲み ---------- */
.callout {
  background: linear-gradient(150deg, var(--ai-wash), color-mix(in srgb, var(--ai-wash) 45%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--ai) 16%, transparent);
  border-left: 4px solid var(--ai);
  border-radius: var(--r-md);
  padding: 1.1rem 1.2rem; margin: 1.4rem 0;
  font-size: .95rem; line-height: 1.9; color: var(--ink-soft);
}
.callout strong { color: var(--ink); font-weight: 700; }
.callout :last-child { margin-bottom: 0; }

/* モックであることの注記 */
.mock-note {
  margin: 1.1rem 0 1.3rem; padding: .75rem 1.1rem;
  border: 1px dashed color-mix(in srgb, var(--ink-faint) 45%, transparent);
  border-radius: var(--r-md);
  font-size: .92rem; color: var(--ink-faint); background: transparent;
}

/* ---------- 下部タブ（常時表示） ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -4px 20px -8px rgba(18,45,66,.18);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar ul {
  max-width: var(--page); margin: 0 auto; padding: .4rem .5rem;
  list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .22rem; min-height: calc(var(--nav-h) - .8rem); padding: .4rem .1rem;
  border-radius: var(--r-md);
  text-decoration: none; color: var(--ink-faint);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  transition: color .15s, background .15s;
}
.tabbar a svg { display: block; }
.tabbar a:hover { color: var(--ai); background: var(--surface-2); }
.tabbar a[aria-current="page"] { color: var(--ai); background: var(--ai-wash); }
.tabbar a[aria-current="page"] svg { stroke-width: 2.4; }

/* ---------- 仕事のカード（入れ子のリンクを避けるため div で組む） ---------- */
.job-card {
  background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 1.2rem 1.15rem; margin: 0 0 .75rem;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.job-card:hover { border-color: var(--ai-wash-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.job-card .ti {
  display: block; font-weight: 700; font-size: 1.08rem; line-height: 1.6;
  letter-spacing: .015em; color: var(--ink); text-decoration: none;
}
.job-card a.ti:hover { color: var(--ai); text-decoration: underline; }
.job-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.job-head .ti { flex: 1; min-width: 12rem; }
.job-meta {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  font-size: .93rem; color: var(--ink-soft); margin: .55rem 0 0;
}
.job-meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* 発注者・出品者の行。ここをタップするとその人のプロフィールへ */
.poster {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: var(--tap); padding: .2rem .9rem .2rem .2rem; margin-left: -.2rem;
  border-radius: 999px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.poster:hover { background: var(--ai-wash); }
.poster .nm { font-weight: 700; font-size: .98rem; line-height: 1.4; }
.poster .st { display: block; font-size: .88rem; color: var(--brass); font-weight: 500; line-height: 1.5; }
.poster .arrow { color: var(--ai); font-weight: 700; font-size: .9rem; margin-left: .1rem; }

/* ---------- ふたつの入口（しごとのトップ） ---------- */
.gate {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  padding: 1.4rem 1.3rem; margin: 0 0 1rem;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.gate:hover { border-color: var(--ai-wash-2); box-shadow: var(--sh-3); transform: translateY(-2px); }
.gate-h { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.gate-ico {
  flex: 0 0 auto; width: 3.2rem; height: 3.2rem; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ai-light), var(--ai));
  color: #fff; box-shadow: var(--sh-ai);
}
.gate-ico.brass { background: linear-gradient(150deg, var(--brass-light), var(--brass)); box-shadow: var(--sh-2); }
.gate h3 { margin: 0; font-size: 1.15rem; }
.gate .lead { font-size: .95rem; color: var(--ink-soft); line-height: 1.85; margin: 0; }
.gate .go { display: inline-block; margin-top: .8rem; color: var(--ai); font-weight: 700; font-size: .98rem; }

/* ---------- カテゴリ ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 34rem) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 7rem; padding: 1rem .6rem; text-align: center;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: .97rem; line-height: 1.5;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease, color .16s;
}
.cat:hover { border-color: var(--ai-wash-2); box-shadow: var(--sh-2); transform: translateY(-2px); color: var(--ai); }
.cat .ico {
  width: 2.7rem; height: 2.7rem; border-radius: .85rem;
  display: grid; place-items: center; background: var(--ai-wash); color: var(--ai);
}
.cat .n { font-size: .86rem; color: var(--ink-faint); font-weight: 500; }

/* ---------- 出品サービスのカード ---------- */
.svc {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden;
  margin: 0 0 .8rem;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.svc:hover { border-color: var(--ai-wash-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.svc-thumb {
  height: 7.5rem; display: grid; place-items: center; position: relative;
  font-family: var(--mincho); font-size: 1.15rem; font-weight: 600;
  color: #fff; letter-spacing: .12em; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.svc-thumb .badge-new {
  position: absolute; top: .6rem; left: .6rem;
  background: var(--surface); color: var(--ok);
  font-family: var(--gothic); font-size: .82rem; font-weight: 700; letter-spacing: 0;
  padding: .1rem .6rem; border-radius: 999px; text-shadow: none;
  box-shadow: var(--sh-1);
}
.t1{background:linear-gradient(140deg,#5B8FB4,#2E5A79)}
.t2{background:linear-gradient(140deg,#9A8154,#665132)}
.t3{background:linear-gradient(140deg,#5E937A,#396253)}
.t4{background:linear-gradient(140deg,#8F6B84,#5F455A)}
.t5{background:linear-gradient(140deg,#A2764F,#6F4E33)}
.t6{background:linear-gradient(140deg,#61729B,#3C4A6E)}
.svc-body { padding: 1rem 1.1rem 1.15rem; }
.svc .ti {
  display: block; font-weight: 700; font-size: 1.02rem; line-height: 1.6;
  color: var(--ink); text-decoration: none;
}
.svc a.ti:hover { color: var(--ai); text-decoration: underline; }
.svc-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: .8rem; flex-wrap: wrap; margin-top: .8rem;
}

/* ---------- プラン ---------- */
.plans { display: grid; gap: .7rem; }
.plan {
  border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 1.15rem; background: var(--surface);
}
.plan.pick { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-wash); }
.plan-h { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; }
.plan .nm { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.plan .dsc { font-size: .95rem; color: var(--ink-soft); line-height: 1.8; margin: .5rem 0 0; }
.plan ul { margin: .7rem 0 0; padding-left: 1.2rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.85; }

/* ---------- 販売の実績 ---------- */
.svc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-soft);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden;
}
.svc-stats div { background: var(--surface); padding: .9rem .5rem; text-align: center; }
.svc-stats .v {
  font-family: var(--mincho); font-weight: 700; color: var(--brass);
  font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.svc-stats .k { font-size: .88rem; color: var(--ink-soft); margin-top: .15rem; }

/* ---------- 定義リスト（募集の条件など） ---------- */
.deflist { margin: 0; }
.deflist div {
  display: flex; gap: .9rem; padding: .7rem 0;
  border-top: 1px solid var(--line-soft);
}
.deflist div:first-child { border-top: 0; padding-top: 0; }
.deflist dt {
  flex: 0 0 6.5rem; font-size: .93rem; font-weight: 700; color: var(--ink-faint);
  letter-spacing: .02em;
}
.deflist dd { margin: 0; flex: 1; min-width: 0; font-size: .98rem; line-height: 1.8; }

/* ---------- 入力欄 ---------- */
.field { margin: 0 0 1.3rem; }
.field > label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .45rem; letter-spacing: .02em; }
.field .help { font-size: .92rem; color: var(--ink-soft); margin: .4rem 0 0; line-height: 1.75; }
.field input[type="text"], .field input[type="email"], .field input[type="date"],
.field input[type="number"], .field select, .field textarea {
  width: 100%; min-height: var(--tap);
  font-family: var(--gothic); font-size: 1.05rem; line-height: 1.7; color: var(--ink);
  padding: .6rem .95rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ai); outline: none; box-shadow: 0 0 0 3px var(--ai-wash);
}
.choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice label {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap); padding: 0 1.1rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .97rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  box-shadow: var(--sh-1);
}
.choice input { width: 1.15rem; height: 1.15rem; accent-color: var(--ai); }
.choice label:has(input:checked) { border-color: var(--ai); color: var(--ai); background: var(--ai-wash); }

/* ---------- 星をえらぶ ---------- */
.star-pick { display: flex; gap: .2rem; }
.star-pick button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 2.2rem; line-height: 1; color: var(--line);
  min-width: var(--tap); min-height: var(--tap);
  padding: 0; transition: color .12s, transform .12s;
}
.star-pick button:hover { transform: scale(1.1); }
.star-pick button[aria-pressed="true"] { color: var(--brass-light); }

/* ---------- 完了の知らせ ---------- */
.done-box {
  background: linear-gradient(150deg, var(--ok-wash), color-mix(in srgb, var(--ok-wash) 40%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-left: 4px solid var(--ok);
  border-radius: var(--r-md); padding: 1.15rem 1.2rem; margin: 1.2rem 0;
}
.done-box h3 { color: var(--ok); margin-bottom: .3rem; }
.done-box p { font-size: .95rem; color: var(--ink-soft); margin: 0; line-height: 1.85; }

/* ---------- 外部リンク（ホームページ・SNS） ---------- */
.links { display: flex; flex-wrap: wrap; gap: .55rem; }
.link-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap); padding: 0 1.05rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--sh-1);
  color: var(--ink); text-decoration: none;
  font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.link-btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--ai-light); }
.link-btn .ico { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.1rem; line-height: 1; }
.link-btn .host { color: var(--ink-faint); font-weight: 500; font-size: .88rem; }

/* ---------- ギブできること ---------- */
.gives { list-style: none; margin: 0; padding: 0; }
.gives li {
  position: relative; padding: .55rem 0 .55rem 1.9rem;
  border-top: 1px solid var(--line-soft); font-size: 1rem; line-height: 1.8;
}
.gives li:first-child { border-top: 0; }
.gives li::before {
  content: ""; position: absolute; left: .35rem; top: 1.1rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: linear-gradient(150deg, var(--brass-light), var(--brass));
}

/* ---------- トーク一覧（名前だけの1行） ---------- */
.talk-row {
  display: flex; align-items: center; gap: .85rem;
  min-height: var(--tap); padding: .5rem .95rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  margin: 0 0 .45rem; text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease;
}
.talk-row:hover { border-color: var(--ai-wash-2); box-shadow: var(--sh-2); transform: translateY(-1px); }
.talk-row .nm {
  flex: 1; min-width: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.5;
  letter-spacing: .015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.talk-ico {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ai-wash); color: var(--ai);
}
.talk-ico.g { background: var(--brass-wash); color: var(--brass); }
.talk-row .n-badge {
  flex: 0 0 auto; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem;
  border-radius: 999px; background: var(--warn); color: #fff;
  font-size: .85rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.talk-row .chev { flex: 0 0 auto; color: var(--ink-faint); font-weight: 700; }

/* ---------- スレッド ---------- */
.thread {
  display: flex; gap: .95rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  padding: 1.1rem; margin: 0 0 .75rem;
  text-decoration: none; color: inherit;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.thread:hover { border-color: var(--ai-wash-2); box-shadow: var(--sh-2); transform: translateY(-2px); }
.thread .body { flex: 1; min-width: 0; }
.thread .ti { font-weight: 700; font-size: 1.05rem; line-height: 1.6; letter-spacing: .015em; }
.thread .last {
  font-size: .95rem; color: var(--ink-soft); line-height: 1.75; margin: .35rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.thread-foot {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .7rem;
  font-size: .92rem; color: var(--ink-faint);
}
.replies {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--ai); font-weight: 700;
}

/* ---------- 会話 ---------- */
.msg { display: flex; gap: .8rem; margin: 0 0 1.1rem; }
.msg .bubble {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-1); padding: .85rem 1.05rem; max-width: 80%;
}
.msg .bubble p { margin: 0; font-size: .98rem; line-height: 1.85; }
.msg .when { display: block; font-size: .85rem; color: var(--ink-faint); margin-top: .35rem; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble {
  background: linear-gradient(160deg, var(--ai-light) -40%, var(--ai) 70%);
  border-color: transparent; color: #fff;
  border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-ai);
}
.msg.me .when { color: rgba(255,255,255,.8); }

/* ---------- 手順 ---------- */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 0 0 1.1rem 3.1rem; font-size: 1rem; line-height: 1.85;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: .1rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: linear-gradient(150deg, var(--ai-light), var(--ai));
  color: #fff; font-weight: 700; font-size: 1rem;
  display: grid; place-items: center; box-shadow: var(--sh-ai);
}

/* ---------- フッター ---------- */
.foot {
  max-width: var(--page); margin: 2.5rem auto 0; padding: 1.6rem 1.1rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem; color: var(--ink-faint); letter-spacing: .04em;
}