/* ds.css — アイムシングル デザインの決まり（T-54。2026-09-26 本番に入れた。見本は T-53・T-55・T-56）
   全画面共通の1ファイル。画面ごとに色・大きさを書かない。
   付け方：部品を包む要素に .ds と、性別 .ds-m／.ds-f。明るい地だけ（決1）。
   詰め方：項目名と入力を1行に並べる（.ds-row-i）／少ない選択肢は横一列の切り替え（.ds-seg）／
           多い選択肢は小さい札（.ds-chip。高さ 36px＝決16）／長い案内は開いて読む（.ds-more）
   読み込み：php/sp/header.php・php/pc/header.php・php/sp/popup.php（hh_htdocs_url('/css/ds.css', true)） */

/* ===== 1. 値（トークン） ===== */
.ds{
  /* 性別色（M1 と同じ） */
  --ds-m:#2F6FB5; --ds-m-tint:#EAF2FB;
  --ds-f:#C04766; --ds-f-tint:#FCEEF2;
  /* 緑：「パーティーを探す」と同じ（pf.css:1 の --pf-grn・--pf-grn-lt・--pf-grn-dk。塗り方は pf.css:100） */
  --ds-grn:#2f7d55; --ds-grn-lt:#38935f; --ds-grn-dk:#215a3d;
  --ds-grn-fill:linear-gradient(180deg,var(--ds-grn-lt) 0%,var(--ds-grn) 46%,var(--ds-grn-dk) 100%);

  /* 文字の大きさ（6段） */
  --ds-fs-1:11px; --ds-fs-2:12px; --ds-fs-3:13px; --ds-fs-4:15px; --ds-fs-5:17px; --ds-fs-6:22px;
  /* 文字の太さ（3段） */
  --ds-fw-1:400; --ds-fw-2:600; --ds-fw-3:700;
  /* 行の高さ（2段） */
  --ds-lh-1:1.3; --ds-lh-2:1.6;
  /* 余白（6段・2と4の倍数） */
  --ds-sp-1:2px; --ds-sp-2:4px; --ds-sp-3:8px; --ds-sp-4:12px; --ds-sp-5:16px; --ds-sp-6:24px;
  /* 角の丸み（4段） */
  --ds-r-1:6px; --ds-r-2:10px; --ds-r-3:14px; --ds-r-4:999px;
  /* 押せる物の高さ（3段） */
  --ds-h-1:36px;  /* 小さい札（決16） */
  --ds-h-2:40px;  /* 入力欄・切り替え */
  --ds-h-3:48px;  /* ボタン */
  /* 項目名の幅（スマホで入力と横に並べるとき） */
  --ds-lbw:116px;
  --ds-lbw-ct:168px;   /* 連絡先の項目名の幅（アイコン＋チェック＋「その他（他のメアド等）」が1行に入る幅） */
  /* 動き（全部品で同じ） */
  --ds-press:.96; --ds-t-1:120ms; --ds-t-2:180ms; --ds-ease:cubic-bezier(.2,.8,.2,1);

  /* 色（明るい地） */
  --ds-bg:#F3F5F8; --ds-surface:#FFFFFF; --ds-ink:#1D2129; --ds-sub:#5B6270; --ds-line:#E8EBF0;
  --ds-field:#F5F7FA; --ds-field-line:#E1E5EB; --ds-ph:#9AA1AB; --ds-off:#EDF0F4; --ds-off-tx:#6B717A;
  --ds-err:#C62828; --ds-err-bg:#FDECEC;
  --ds-toast:#1D2129; --ds-toast-tx:#FFFFFF;
  --ds-sh-1:0 1px 2px rgba(29,33,41,.06);
  --ds-sh-2:0 2px 8px rgba(29,33,41,.10);
  --ds-sh-3:0 12px 28px rgba(29,33,41,.20);

  /* 性別で変わる値（男性が初期値） */
  --ds-ac:var(--ds-m); --ds-tint:var(--ds-m-tint); --ds-ac-tx:var(--ds-m); --ds-ring:rgba(47,111,181,.22);

  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  font-size:var(--ds-fs-4); line-height:var(--ds-lh-2); color:var(--ds-ink); -webkit-text-size-adjust:100%;
}
.ds-f{ --ds-ac:var(--ds-f); --ds-tint:var(--ds-f-tint); --ds-ac-tx:var(--ds-f); --ds-ring:rgba(192,71,102,.22); }


.ds, .ds *, .ds *::before, .ds *::after{ box-sizing:border-box; }
.ds-page{ background:var(--ds-bg); padding:var(--ds-sp-4) 0; }

/* 押したときの反応（全部品で同じ：縮む＋色） */
.ds-btn, .ds-chip > span, .ds-seg-i > span, .ds-check > span, .ds-bb{
  transition:transform var(--ds-t-1) var(--ds-ease), background-color var(--ds-t-2) var(--ds-ease),
             border-color var(--ds-t-2) var(--ds-ease), color var(--ds-t-2) var(--ds-ease),
             box-shadow var(--ds-t-2) var(--ds-ease), filter var(--ds-t-2) var(--ds-ease);
  -webkit-tap-highlight-color:transparent;
}
.ds-btn:active, .ds-chip:active > span, .ds-seg-i:active > span, .ds-check:active > span, .ds-bb:active{ transform:scale(var(--ds-press)); }
@media (prefers-reduced-motion:reduce){
  .ds-btn, .ds-chip > span, .ds-seg-i > span, .ds-check > span, .ds-bb, .ds-toast{ transition:none; animation:none; }
}

/* ===== 2. 部品 ===== */

/* ページの題名＋進み具合（1つの帯にまとめる。昔の article h2 の灰色の帯と赤い線は消す） */
.ds .ds-head{ display:flex; align-items:center; gap:var(--ds-sp-4); margin:0 0 var(--ds-sp-4); }
.ds .ds-title{ flex:1 1 auto; display:flex; align-items:center; gap:var(--ds-sp-3); margin:0; padding:0; border:0; background:none; box-shadow:none;
  font-size:var(--ds-fs-6); font-weight:var(--ds-fw-3); line-height:var(--ds-lh-1); letter-spacing:.01em; color:var(--ds-ink); }
.ds .ds-title-ic{ flex:none; width:32px; height:32px; border-radius:var(--ds-r-4); background:var(--ds-ac); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; }
.ds .ds-title-ic svg{ width:18px; height:18px; }

/* 入力の進み具合（題名の右に小さく。あと○項目） */
.ds .ds-prog{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:var(--ds-sp-2); width:112px; }
.ds .ds-prog-t{ font-size:var(--ds-fs-2); font-weight:var(--ds-fw-2); color:var(--ds-sub); line-height:1; white-space:nowrap; }
.ds .ds-prog-t b{ font-size:var(--ds-fs-4); font-weight:var(--ds-fw-3); color:var(--ds-ac-tx); font-variant-numeric:tabular-nums; margin:0 1px; }
.ds .ds-prog-bar{ width:100%; height:4px; border-radius:var(--ds-r-4); background:var(--ds-off); overflow:hidden; }
.ds .ds-prog-bar i{ display:block; height:100%; border-radius:inherit; background:var(--ds-ac); transition:width var(--ds-t-2) var(--ds-ease); }
.ds .ds-prog.done .ds-prog-bar i{ background:var(--ds-grn); }

/* 枠（性別色の線） */
.ds .ds-card{ margin:0 0 var(--ds-sp-4); background:var(--ds-surface); border:1px solid var(--ds-ac); border-radius:var(--ds-r-3); overflow:hidden; box-shadow:var(--ds-sh-1); }

/* 区切りの見出し（濃い性別色に白字。案内文も同じ帯の中） */
.ds .ds-sec{ margin:0; padding:var(--ds-sp-3) var(--ds-sp-4); background:var(--ds-ac); color:#fff; }
.ds .ds-sec-t{ display:block; margin:0; padding:0; border:0; background:none;
  font-size:var(--ds-fs-4); font-weight:var(--ds-fw-3); line-height:var(--ds-lh-1); letter-spacing:.03em; color:#fff; }
.ds .ds-sec-n{ margin:var(--ds-sp-1) 0 0; font-size:var(--ds-fs-2); font-weight:var(--ds-fw-1); line-height:var(--ds-lh-2); color:rgba(255,255,255,.86); }

/* 項目の行。.ds-row-i は項目名と入力を横に並べる */
.ds .ds-row{ padding:var(--ds-sp-3) var(--ds-sp-4); border-top:1px solid var(--ds-line); }
.ds .ds-body > .ds-row:first-child{ border-top:0; }
.ds .ds-row-i{ display:grid; grid-template-columns:var(--ds-lbw) minmax(0,1fr); column-gap:var(--ds-sp-3); align-items:center; }
.ds .ds-lb{ display:flex; align-items:center; gap:6px; margin:0 0 var(--ds-sp-2);
  font-size:var(--ds-fs-3); font-weight:var(--ds-fw-2); line-height:var(--ds-lh-1); color:var(--ds-sub); }
.ds .ds-row-i > .ds-lb{ margin:0; align-items:center; flex-wrap:wrap; row-gap:3px; }
.ds .ds-row-i > .ds-lb > span:not([class]){ flex:1 1 0; min-width:0; text-wrap:balance; }   /* 項目名は残りの幅いっぱいに。必須・変更不可の印は次の行へ */
.ds .ds-row-i > .ds-lb::after{ content:""; flex-basis:100%; order:2; height:0; }
.ds .ds-row-i > .ds-lb > .ds-req, .ds .ds-row-i > .ds-lb > .ds-fix{ order:3; margin-left:22px; }
.ds .ds-ic{ flex:none; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; color:var(--ds-ac-tx); }
.ds .ds-ic svg{ width:16px; height:16px; }
.ds .ds-note{ margin:var(--ds-sp-2) 0 0; font-size:var(--ds-fs-2); color:var(--ds-sub); line-height:var(--ds-lh-1); }
.ds .ds-val{ font-size:var(--ds-fs-4); font-weight:var(--ds-fw-3); color:var(--ds-ink); line-height:var(--ds-lh-1); }
.ds .ds-row-i .ds-note{ grid-column:2; }
.ds .ds-row-ct{ grid-template-columns:var(--ds-lbw-ct) minmax(0,1fr); }   /* 連絡先の4行：項目名の幅をそろえる（一番長い「その他（他のメアド等）」が1行に入る幅） */
.ds .ds-row-ct .ds-note{ grid-column:1 / -1; }
.ds .ds-row-ct > .ds-lb{ flex-wrap:nowrap; min-width:var(--ds-lbw-ct); }
.ds .ds-row-ct > .ds-lb::after{ display:none; }
.ds .ds-row-ct .ds-check > span{ white-space:nowrap; font-size:var(--ds-fs-2); }

/* 必須の印・変更不可の印（小さい点と文字） */
.ds .ds-req, .ds .ds-fix{ display:inline-flex; align-items:center; height:16px; padding:0 5px; border-radius:var(--ds-r-1);
  font-size:10px; font-weight:var(--ds-fw-3); line-height:1; letter-spacing:.02em; white-space:nowrap; }
.ds .ds-req{ background:var(--ds-ac); color:#fff; }
.ds .ds-fix{ background:var(--ds-off); color:var(--ds-off-tx); }

/* 入力欄（地は薄い灰色・線は細く。回答は太字） */
.ds .ds-in input[type=text], .ds .ds-in input[type=password], .ds .ds-in select, .ds .ds-in textarea, .ds .ds-input{
  display:block; width:100%; height:var(--ds-h-2); margin:0; padding:0 var(--ds-sp-4);
  font-family:inherit; font-size:var(--ds-fs-4); font-weight:var(--ds-fw-3); line-height:var(--ds-h-2); color:var(--ds-ink);
  background:var(--ds-field); border:1px solid var(--ds-field-line); border-radius:var(--ds-r-2);
  -webkit-appearance:none; appearance:none; outline:none;
  transition:border-color var(--ds-t-2) var(--ds-ease), box-shadow var(--ds-t-2) var(--ds-ease), background-color var(--ds-t-2) var(--ds-ease);
}
.ds .ds-in input::placeholder, .ds .ds-in textarea::placeholder{ font-weight:var(--ds-fw-1); color:var(--ds-ph); }
.ds .ds-in input:focus, .ds .ds-in select:focus, .ds .ds-in textarea:focus{ background:var(--ds-surface); border-color:var(--ds-ac); box-shadow:0 0 0 3px var(--ds-ring); }
.ds .ds-in select{ padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ds-sub) 50%),linear-gradient(135deg,var(--ds-sub) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%; background-size:5px 5px; background-repeat:no-repeat; }
.ds .ds-in textarea{ height:auto; min-height:76px; padding:var(--ds-sp-3) var(--ds-sp-4); resize:vertical; line-height:var(--ds-lh-2); }
/* 1行の文を折り返して全部見せる欄（PRメッセージ。決6-2 の P2）：textarea.ds-1line。改行は ds.js が空白に置き換え、高さは中身に合わせる */
.ds .ds-in textarea.ds-1line{ min-height:var(--ds-h-2); padding:9px var(--ds-sp-4); resize:none; overflow:hidden; }
.ds .ds-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ds-sp-3); }
.ds .ds-sub{ display:block; margin:0; }
.ds .ds-row-i .ds-sub > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }   /* 横並びでは欄の中の薄い字（placeholder）で示す */
.ds .ds-sub > span{ display:block; margin:0 0 var(--ds-sp-1); font-size:var(--ds-fs-1); font-weight:var(--ds-fw-2); color:var(--ds-sub); }

/* 間違いの表示（欄のすぐ下） */
.ds .ds-in .is-err, .ds .ds-in.is-err input, .ds .ds-in.is-err select, .ds .ds-in.is-err textarea{ border-color:var(--ds-err); background:var(--ds-err-bg); }
.ds .ds-err{ display:flex; align-items:center; gap:5px; margin:var(--ds-sp-2) 0 0;
  font-size:var(--ds-fs-2); font-weight:var(--ds-fw-2); line-height:var(--ds-lh-1); color:var(--ds-err); }
.ds .ds-row-i .ds-err{ grid-column:2; }
.ds .ds-err::before{ content:"!"; flex:none; width:14px; height:14px; border-radius:var(--ds-r-4); background:var(--ds-err); color:var(--ds-surface);
  font-size:10px; font-weight:var(--ds-fw-3); line-height:14px; text-align:center; }

/* 横一列の切り替え（ラジオ・少ないチェック。input は残して見えなくする） */
.ds .ds-seg{ display:flex; gap:2px; padding:2px; border-radius:var(--ds-r-2); background:var(--ds-off); }
.ds .ds-seg-i{ position:relative; flex:1 1 0; min-width:0; margin:0; cursor:pointer; }
.ds .ds-seg-i > input, .ds .ds-chip > input, .ds .ds-check > input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.ds .ds-seg-i > span{ display:flex; align-items:center; justify-content:center; height:calc(var(--ds-h-2) - 4px); padding:0 4px; border-radius:8px;
  font-size:var(--ds-fs-3); font-weight:var(--ds-fw-2); line-height:1; color:var(--ds-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds .ds-seg-i > input:checked + span{ background:var(--ds-ac); color:#fff; font-weight:var(--ds-fw-3); box-shadow:var(--ds-sh-2); }
.ds .ds-seg-i > input:focus-visible + span{ box-shadow:0 0 0 3px var(--ds-ring); }

/* 小さい札（選択肢が多いもの。アピールポイント） */
.ds .ds-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ds .ds-chip{ position:relative; display:inline-flex; margin:0; cursor:pointer; }
.ds .ds-chip > span{ display:inline-flex; align-items:center; height:var(--ds-h-1); padding:0 10px;
  border:1px solid var(--ds-field-line); border-radius:var(--ds-r-4); background:var(--ds-surface);
  font-size:var(--ds-fs-3); font-weight:var(--ds-fw-2); line-height:1; color:var(--ds-ink); white-space:nowrap; }
.ds .ds-chip > input:checked + span{ background:var(--ds-ac); border-color:var(--ds-ac); color:#fff; font-weight:var(--ds-fw-3); }
.ds .ds-chip > input:focus-visible + span, .ds .ds-check > input:focus-visible + span{ box-shadow:0 0 0 3px var(--ds-ring); }

/* 四角のチェック（連絡先の「お伝えする」） */
.ds .ds-check{ position:relative; display:inline-flex; align-items:center; margin:0; cursor:pointer; min-width:0; }
.ds .ds-check > span{ display:inline-flex; align-items:center; gap:6px; font-size:var(--ds-fs-3); font-weight:var(--ds-fw-2); line-height:var(--ds-lh-1); color:var(--ds-sub); }
.ds .ds-check > span::before{ content:""; flex:none; width:18px; height:18px; border-radius:5px; border:1px solid var(--ds-field-line); background:var(--ds-field);
  transition:background-color var(--ds-t-2) var(--ds-ease), border-color var(--ds-t-2) var(--ds-ease); }
.ds .ds-check > input:checked + span{ color:var(--ds-ink); font-weight:var(--ds-fw-3); }
.ds .ds-check > input:checked + span::before{ border-color:var(--ds-ac); background:var(--ds-ac)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat; }

/* 開いて読む案内（写真の決まりなど長い文） */
.ds .ds-more{ margin:var(--ds-sp-2) 0 0; font-size:var(--ds-fs-2); color:var(--ds-sub); line-height:var(--ds-lh-2); }
.ds .ds-more > summary{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; list-style:none; font-weight:var(--ds-fw-2); color:var(--ds-ac-tx); }
.ds .ds-more > summary::-webkit-details-marker{ display:none; }
.ds .ds-more > summary::after{ content:""; width:6px; height:6px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); margin-top:-3px;
  transition:transform var(--ds-t-2) var(--ds-ease); }
.ds .ds-more[open] > summary::after{ transform:rotate(-135deg); margin-top:3px; }
.ds .ds-more ul{ margin:var(--ds-sp-2) 0 0; padding-left:1.2em; }

/* ボタン（主＝緑・副） */
.ds .ds-btn{ display:flex; align-items:center; justify-content:center; gap:var(--ds-sp-3); width:100%; max-width:400px; height:var(--ds-h-3);
  margin:0 auto; padding:0 var(--ds-sp-6); border:0; border-radius:var(--ds-r-3); cursor:pointer; -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:var(--ds-fs-5); font-weight:var(--ds-fw-3); line-height:1; letter-spacing:.06em; text-decoration:none; }
.ds .ds-btn-pri{ background:var(--ds-grn-fill); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), var(--ds-sh-2); }
.ds .ds-btn-pri:active{ filter:brightness(.9); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), var(--ds-sh-1); }
.ds .ds-btn-sec{ background:var(--ds-surface); color:var(--ds-ink); box-shadow:inset 0 0 0 1px var(--ds-field-line), var(--ds-sh-1); }
.ds .ds-btn-sec:active{ background:var(--ds-tint); box-shadow:inset 0 0 0 1px var(--ds-ac); }
.ds .ds-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ds-ring), var(--ds-sh-2); }
.ds .ds-btns{ display:flex; flex-direction:column; gap:var(--ds-sp-3); margin:var(--ds-sp-5) 0 var(--ds-sp-2); }

/* 保存した知らせ（画面の下から出て、2.4秒で消える。ds.js の dsToast()。画面下の列がある画面では列の上に出す） */
.ds.ds-toast{ position:fixed; left:50%; bottom:calc(var(--ds-sp-6) + env(safe-area-inset-bottom)); z-index:1000;
  display:inline-flex; align-items:center; gap:var(--ds-sp-3); max-width:calc(100% - 32px); padding:10px var(--ds-sp-5) 10px 10px;
  border-radius:var(--ds-r-4); background:var(--ds-toast); color:var(--ds-toast-tx); box-shadow:var(--ds-sh-3);
  font-size:var(--ds-fs-3); font-weight:var(--ds-fw-3); line-height:1;
  transform:translate(-50%,0); animation:ds-toast-in var(--ds-t-2) var(--ds-ease); }
.ds.ds-toast.is-static{ position:static; transform:none; animation:none; }
.ds.ds-toast::before{ content:""; flex:none; width:20px; height:20px; border-radius:var(--ds-r-4); background:var(--ds-grn)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat; }
@keyframes ds-toast-in{ from{ opacity:0; transform:translate(-50%,12px); } to{ opacity:1; transform:translate(-50%,0); } }

/* 写真（md_image_input_html の中身はそのまま。並べ方だけ） */
.ds .ds-photos{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ds-sp-3); margin-top:var(--ds-sp-3); }
.ds .ds-guide{ margin:0; font-size:var(--ds-fs-2); color:var(--ds-sub); line-height:var(--ds-lh-2); }
.ds .ds-guide b{ display:block; margin:0 0 var(--ds-sp-1); font-size:var(--ds-fs-3); font-weight:var(--ds-fw-3); color:var(--ds-ink); }
.ds .pw-field{ display:flex; align-items:center; gap:var(--ds-sp-3); }

/* PC（768px 以上）：項目名の幅を広げる。行の作りはスマホと同じ */
@media (min-width:768px){
  .ds{ --ds-lbw:200px; }
  .ds .ds-row{ padding:var(--ds-sp-3) var(--ds-sp-5); }
  .ds .ds-row:not(.ds-row-i){ display:grid; grid-template-columns:var(--ds-lbw) minmax(0,1fr); column-gap:var(--ds-sp-3); align-items:start; }
  .ds .ds-row:not(.ds-row-i) > .ds-lb{ margin:7px 0 0; }
  .ds .ds-row:not(.ds-row-i) > :not(.ds-lb){ grid-column:2; }
  .ds .ds-sec{ padding:var(--ds-sp-3) var(--ds-sp-5); }
  .ds .ds-row.ds-row-wide{ display:block; }
  .ds .ds-row.ds-row-wide > .ds-lb{ margin:0 0 var(--ds-sp-3); }
  .ds{ --ds-lbw-ct:200px; }
  .ds .ds-photos{ max-width:360px; }
  .ds .ds-seg{ max-width:420px; }
}

/* ===== 3. パーティー中の画面下の列（list.php の <div class="botbar ds"> に重ねる） ===== */
.botbar.ds{ font-size:inherit; line-height:normal; }
.botbar.ds button{ transition:transform var(--ds-t-1) var(--ds-ease), filter var(--ds-t-2) var(--ds-ease),
  background-color var(--ds-t-2) var(--ds-ease), box-shadow var(--ds-t-2) var(--ds-ease); }
.botbar.ds button:active{ transform:scale(var(--ds-press)); filter:brightness(.9); }
.botbar button.bb-memo.ds-memo{ background:var(--ds-grn-fill); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), 0 4px 12px rgba(30,70,50,.30); }
.botbar button.bb-memo.ds-memo:focus-visible{ outline-color:#fff; }
.botbar .ds-memo .bb-marks{ display:flex; align-items:center; justify-content:center; gap:1px; }
.botbar .ds-memo .bb-marks i{ font-style:normal; width:17px; height:17px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; line-height:1; color:rgba(255,255,255,.55); transition:color var(--ds-t-2) var(--ds-ease), background-color var(--ds-t-2) var(--ds-ease); }
.botbar .ds-memo .bb-marks i.on{ color:#215a3d; background:#fff; }
/* 鉛筆：メモに文字があるとき（list.php の bbPaint() が付ける .bb-has）は白い丸に緑の鉛筆（決10 の案B。付けている印 i.on と同じ「白地に緑」） */
.botbar .ds-memo .bb-pen{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  transition:background-color var(--ds-t-2) var(--ds-ease), color var(--ds-t-2) var(--ds-ease); }
.botbar .ds-memo .bb-pen svg{ width:20px; height:20px; stroke-width:2.25; }
.botbar .ds-memo.bb-has .bb-pen{ background:#fff; color:#215a3d; }

/* ===== 4. 第3版で足したもの ===== */
/* 1行の文の欄は、.ds の外（当日のプロフィール・申込の画面）でも手で広げない・中身に合わせて伸びる */
textarea.ds-1line{ display:block; resize:none; overflow:hidden; font-family:inherit; font-size:inherit; line-height:1.5; vertical-align:top; }
/* 連絡先の4行：スマホ（768px 未満）は1段目にアイコン・チェック・項目名、2段目に入力欄を幅いっぱい（PC は1行のまま） */
@media (max-width:767px){
  .ds .ds-row-ct{ grid-template-columns:minmax(0,1fr); row-gap:6px; }
  .ds .ds-row-ct > .ds-lb{ min-width:0; }
  .ds .ds-row-ct > .ds-in, .ds .ds-row-ct .ds-note, .ds .ds-row-ct .ds-err{ grid-column:1; }
}
@media (min-width:768px){
  /* PRメッセージは PC でも項目名の下に幅いっぱい */
  .ds .ds-row.ds-row-full{ display:block; }
  .ds .ds-row.ds-row-full > .ds-lb{ margin:0 0 var(--ds-sp-3); }
  /* マイフェイバリット：PC は2列に並べて縦を詰める（決18） */
  .ds .ds-cols2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); --ds-lbw:150px; }
  .ds .ds-cols2 > .ds-row{ border-top:1px solid var(--ds-line); }
  .ds .ds-cols2 > .ds-row:nth-child(-n+2){ border-top:0; }
  .ds .ds-cols2 > .ds-row:nth-child(even){ border-left:1px solid var(--ds-line); }
}

/* FIX 2026-09-27 押してほしいボタン（緑）の地の色を #238636 にした（樽井さん指示。pf.css の最後と同じ値）。会員の入力画面の「確認」など .ds-btn-pri だけ。
   変数 --ds-grn・--ds-grn-fill は、ほかの所（進み具合・保存の知らせ・画面下のメモ・管理画面のボタン）でも使うので変えていない。形・動き・影は変えていない
   （押したときの filter:brightness(.9) は今のまま）。前は var(--ds-grn-fill)＝linear-gradient(#38935f→#2f7d55→#215a3d)。 */
.ds .ds-btn-pri{ background:#238636; }
.ds .ds-btn-pri:hover{ background:#2ea043; }
.ds .ds-btn-pri:active{ background:#1a6e2e; }