/* ============ cs_mypage theme — 唯一の真実 ============
   仕様: docs/design/cs-mypage/design.md
   原器: docs/design/cs-mypage/prototype-{form,hub-v3}.html */
/* 1. tokens / 2. base / 3. layout(.cs-wrap .phead .eyebrow .tabs)
   / 4. card(.card .chead .chip .cbody .section-label)
   / 5. form(.frow .flabel .badge-req .badge-opt .fhelp .in .sel .ta .fcount .frow.is-error .ferr .pills .pill-check .subcard)
   / 6. display(.dl .dt .dd) / 7. list(.msg系) / 8. buttons(.btn系)
   / 9. savebar / 10. misc(.prow .pill) / 11. responsive(640px) / 12. a11y(reduced-motion)
   / 14. hub(.hub-hero .menu-grid .mcard .pill-dark) / 13. site chrome overrides(※末尾固定) */

/* ===== 1. tokens ===== */
:root{
  --ink:#0e1626;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-l:#6aa3ff;
  --orange:#fb6a2c; --orange-d:#ea580c;
  --mint:#10b981;
  --red:#e11d48; --red-bg:#fff1f2;
  --bg:#f4f6fb; --surface:#ffffff;
  --text:#1e293b; --strong:#0f172a; --muted:#64748b; --faint:#94a3b8;
  --border:#e7ebf3; --border-h:#cdd6e4; --input-b:#d4dbe8;
  --blue-50:#eef4ff; --blue-100:#dde9ff;
  --orange-50:#fff4ee;
  --r-lg:20px; --r-card:18px; --r-btn:12px; --r-chip:14px; --r-input:9px;
  --sh:0 1px 3px rgba(13,22,42,.06), 0 1px 2px rgba(13,22,42,.04);
  --sh-h:0 26px 44px -18px rgba(13,22,42,.22), 0 10px 18px -10px rgba(13,22,42,.10);
  --ease:cubic-bezier(.4,0,.2,1);
  --display:"Archivo","Noto Sans JP",sans-serif;
}

/* ===== 2. base ===== */
.cs-theme *{box-sizing:border-box;}
body.cs-theme{
  margin:0; padding:0;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic Pro",Meiryo,sans-serif;
  color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased;
  background-color:var(--bg);
  background-image:radial-gradient(rgba(37,99,235,.045) 1px, transparent 1px);
  background-size:24px 24px;
}

/* ===== 3. layout ===== */
.cs-theme .cs-wrap{max-width:880px; margin:0 auto; padding:28px 20px 120px;}
/* 見出し(.phead)・タブ(#menubar) は #main.cs-wrap の外（#container 直下）に出るページがある
   （member_info / block）。PC で全幅に広がらないよう、カード内容幅（880-padding=840px）に
   合わせて中央寄せ。SP は画面 < 840 で max-width が無効化され #container の左右18pxが効く */
.cs-theme .phead, .cs-theme #menubar{max-width:840px; margin-left:auto; margin-right:auto;}

/* site chrome clearance — top_header.css 連携（旧 style_*_member_info.css の #container 代替）
   ≥768px: header fixed(50px) + .headermenu_pc fixed(top:50px) / <768px: header 50px(relative・in-flow) + .headermenu absolute(top:50px・コンテンツに被る) */
body.cs-theme #container{padding-top:120px;}
/* スポーツ別マイページ TOP（ハブ＝#top_main を持つページ）は header/menu が in-flow のため、
   cs_mypage.css 由来の #container margin-top:100px と上の padding-top(120/76) が二重の過剰余白になる。
   ハブ限定（:has(#top_main)）で詰める。他ページ（固定/absolute メニュー前提）の余白は不変。 */
body.cs-theme #container:has(#top_main){margin-top:0 !important;}
@media (max-width:767px){
  /* header は in-flow なので、必要な逃しは absolute メニュー（top:50+高さ60〜70）の被り分のみ。
     実機ではフォントレンダリングでメニュー帯が高くなり得るため余裕込みで76px */
  body.cs-theme #container{padding-top:76px;}
  /* 管理者/身代わりバナー表示時: header が押し下げられ menu の被りを自然に超えるため逃しは最小でよい。
     また proxy_banner.html が .headermenu{top:34!important} と誤補正（正しくは元値50+34）するため、
     ヘッダー実下端（118px）へ !important 対抗で是正し「banner→header→menu」の順序を戻す（cs-theme ページ限定） */
  /* バナーCSSの header{top:34!important} は fixed 想定の補正。モバイルの header は
     relative（in-flow）のため「描画だけ34pxズレて隙間＋コンテンツ被り」になる。
     body padding がバナー分を逃しているので top は 0 に戻し（全テーマページ共通）、
     バナー実高40px（min-height32+padding）に合わせ body 余白も 34→40 に補正。
     これで banner(40)+header(50)+menu(60)=150 と、非バナー時 header(50)+menu(60)=110 が
     同じ「#container 基本余白60px」で噛み合う（バナー時の特例 padding は不要） */
  html body.cs-theme:has(.proxy-banner) header{top:0 !important;}
  html body.cs-theme:has(.proxy-banner){padding-top:40px !important;}
  html body.cs-theme:has(.proxy-banner) .headermenu{top:90px !important;}
}

/* page header */
.cs-theme .phead{margin-bottom:18px;}
.cs-theme .phead .eyebrow{
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:10px;
}
.cs-theme .phead .eyebrow::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--border),transparent);}
.cs-theme .phead h1{margin:6px 0 2px; font-size:23px; font-weight:900; color:var(--strong); letter-spacing:.01em;}
.cs-theme .phead .crumb{font-size:12.5px; color:var(--faint);}
/* 親リンク＝戻り導線。eyebrow の青と色被りしないよう洗練スレート＋常時下線でリンクと示す（矢印なし） */
.cs-theme .phead .crumb a{color:var(--muted); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:600;}
.cs-theme .phead .crumb a:hover{color:var(--strong); text-decoration-thickness:2px;}
/* #contents 内（メッセージ等）は後方の .cs-theme #contents a{color:inherit} が crumb を
   --faint に上書きしてしまうため、同 id・高クラス詳細度で --muted を再宣言し bbs と色を揃える */
.cs-theme #contents .phead .crumb a{color:var(--muted);}
.cs-theme #contents .phead .crumb a:hover{color:var(--strong);}

/* tabs (about / learn / teach) — セグメントコントロール型パネル
   member_info は ul.tabs>li>a.tab、block は nav.tabs>a.tab の2形態 → li は display:contents で吸収 */
.cs-theme .tabs{display:flex; gap:6px; margin:18px 0 22px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh); list-style:none;}
.cs-theme .tabs li{display:contents;}
.cs-theme .tab,
.cs-theme #contents .tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  appearance:none; background:none; border:0; cursor:pointer; font-family:inherit; text-decoration:none;
  font-size:14px; font-weight:700; color:var(--muted); padding:9px 6px 10px; text-align:center;
  border-radius:10px; transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-theme .tab:hover,
.cs-theme #contents .tab:hover{color:var(--strong); background:var(--bg);}
.cs-theme .tab[aria-selected="true"],
.cs-theme #contents .tab[aria-selected="true"]{background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; box-shadow:0 6px 14px -6px rgba(37,99,235,.5);}
.cs-theme .tab .cnt{font-family:var(--display); font-size:10.5px; font-weight:500; color:var(--faint); letter-spacing:.02em;}
.cs-theme .tab[aria-selected="true"] .cnt{color:rgba(255,255,255,.78);}

/* テンプレ直書きの h4 見出し（「◯◯ さんのコーチ情報」等）— 前文との間隔と体裁 */
.cs-theme #main h4{margin:26px 2px 14px; font-size:16.5px; font-weight:700; color:var(--strong);}

/* ===== 4. card ===== */
.cs-theme .card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--sh); margin-bottom:18px; overflow:hidden;
}
.cs-theme .card .chead{display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid var(--border);}
.cs-theme .card .chead .chip{width:38px; height:38px; border-radius:12px; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none;}
.cs-theme .card .chead .chip.chip-err{background:var(--red-bg); color:var(--red);}
.cs-theme .card .chead h2{margin:0; font-size:15.5px; font-weight:700; color:var(--strong);}
.cs-theme .card .chead .sub{font-size:12px; color:var(--faint); margin-top:1px;}
.cs-theme .card .cbody{padding:6px 22px 18px;}

.cs-theme .section-label{
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--blue); margin:30px 2px 12px; display:flex; align-items:center; gap:10px;
}
.cs-theme .section-label::after{content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--border),transparent);}
.cs-theme .section-label .ja{font-family:"Noto Sans JP",sans-serif; letter-spacing:.02em; color:var(--faint); font-weight:500; font-size:11.5px;}

/* ===== 5. form ===== */
.cs-theme .frow{display:grid; grid-template-columns:210px 1fr; gap:8px 22px; padding:15px 0; border-bottom:1px solid var(--border); align-items:start;}
.cs-theme .frow:last-child{border-bottom:0;}
.cs-theme .frow .flabel{font-size:13.5px; font-weight:500; color:var(--strong); padding-top:9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.cs-theme .badge-req{font-size:10.5px; font-weight:700; color:#fff; background:var(--orange); border-radius:6px; padding:1px 7px; letter-spacing:.04em; flex:none;}
.cs-theme .badge-opt{font-size:10.5px; font-weight:700; color:var(--faint); background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1px 7px; flex:none;}
.cs-theme .fhelp{font-size:12px; color:var(--faint); margin-top:6px;}

/* inputs */
.cs-theme .in, .cs-theme .sel, .cs-theme .ta{
  width:100%; font-family:inherit; font-size:14px; color:var(--text);
  border:1px solid var(--input-b); border-radius:var(--r-input); background:#fff;
  padding:10px 13px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-theme .sel{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; max-width:340px;}
.cs-theme .ta{min-height:96px; resize:vertical;}
.cs-theme .in:focus,.cs-theme .sel:focus,.cs-theme .ta:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16);}
.cs-theme .fcount{font-size:11.5px; color:var(--faint); text-align:right; margin-top:4px; font-variant-numeric:tabular-nums;}

/* error state */
.cs-theme .frow.is-error .in, .cs-theme .frow.is-error .ta, .cs-theme .frow.is-error .sel{border-color:var(--red); box-shadow:0 0 0 3px rgba(225,29,72,.12);}
.cs-theme .ferr{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--red); margin-top:7px; font-weight:500;}

/* tag pills (checkbox) */
.cs-theme .pills{display:flex; flex-wrap:wrap; gap:9px; padding-top:4px;}
.cs-theme .pill-check{position:relative;}
.cs-theme .pill-check input{position:absolute; opacity:0; inset:0; cursor:pointer;}
.cs-theme .pill-check span{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500;
  color:var(--muted); background:#fff; border:1.5px solid var(--input-b); border-radius:999px;
  padding:7px 15px; cursor:pointer; transition:all .18s var(--ease); user-select:none;
}
.cs-theme .pill-check span::before{content:"\f067"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:10px; color:var(--faint); transition:all .18s var(--ease);}
.cs-theme .pill-check input:checked + span{color:var(--blue-d); background:var(--blue-50); border-color:var(--blue);}
.cs-theme .pill-check input:checked + span::before{content:"\f00c"; color:var(--blue);}
.cs-theme .pill-check input:focus-visible + span{box-shadow:0 0 0 3px rgba(37,99,235,.25);}
/* 閲覧モード（disabled のタグ表示）: 選択済みだけ目立たせる */
.cs-theme .pill-check input:disabled + span{cursor:default;}
.cs-theme .pill-check input:disabled:not(:checked) + span{opacity:.55;}

/* 種別ごとの可愛いパステル配色（テニス会員情報 / CON-267）
   toggle1=種目系→ローズ / toggle2=利用目的系→ミント / toggle3=タグ付け→ラベンダー。
   .cs-mypage-tennis（body）にスコープし、他スポーツ/他ページの青はそのまま。AAコントラスト確保。 */
.cs-theme.cs-mypage-tennis .pill-check input[id^="toggle1-"]:checked + span{color:#b3155a; background:#ffe9f0; border-color:#f3a6c2;}
.cs-theme.cs-mypage-tennis .pill-check input[id^="toggle1-"]:checked + span::before{color:#e64980;}
.cs-theme.cs-mypage-tennis .pill-check input[id^="toggle2-"]:checked + span{color:#0f6e47; background:#e6f7ef; border-color:#86d3b1;}
.cs-theme.cs-mypage-tennis .pill-check input[id^="toggle2-"]:checked + span::before{color:#1ea672;}
.cs-theme.cs-mypage-tennis .pill-check input[id^="toggle3-"]:checked + span{color:#5f3dc4; background:#efe9fd; border-color:#c0a8f0;}
.cs-theme.cs-mypage-tennis .pill-check input[id^="toggle3-"]:checked + span::before{color:#845ef7;}

/* conditional sub-card (teach: online coach) */
.cs-theme .subcard{
  margin:14px 0 4px; border:1px solid #fcd9bf; background:var(--orange-50);
  border-radius:14px; padding:14px 18px;
}
.cs-theme .subcard .shead{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; color:var(--orange-d);}
.cs-theme .subcard .shead .tag{font-family:var(--display); font-size:10px; letter-spacing:.14em; background:var(--orange); color:#fff; border-radius:6px; padding:2px 8px;}
.cs-theme .subcard p{margin:7px 0 0; font-size:12.5px; color:#9a5b33;}

/* ===== 6. display (readonly mode / definition list) ===== */
.cs-theme .dl{display:grid; grid-template-columns:210px 1fr; gap:0 22px;}
.cs-theme .dl .dt{font-size:13px; color:var(--muted); padding:11px 0; border-bottom:1px solid var(--border);}
.cs-theme .dl .dd{font-size:14px; color:var(--strong); padding:11px 0; border-bottom:1px solid var(--border); font-weight:500;}
.cs-theme .dl .dt:nth-last-child(2), .cs-theme .dl .dd:last-child{border-bottom:0;}
.cs-theme .dl .dt, .cs-theme .dl .dd{min-width:0; overflow-wrap:break-word;}

/* ===== 7. list (message rows) ===== */
.cs-theme .msg{display:flex; align-items:center; gap:14px; padding:13px 8px; border-radius:12px; text-decoration:none; color:inherit; transition:background .2s var(--ease);}
.cs-theme .msg + .msg{border-top:1px solid var(--border);}
.cs-theme .msg:hover{background:#f7f9fd;}
.cs-theme .msg .mav{width:42px; height:42px; border-radius:50%; flex:none; background:var(--blue-100); color:var(--blue-d); display:flex; align-items:center; justify-content:center; font-weight:700; overflow:hidden;}
.cs-theme .msg .mav img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.cs-theme .msg .mbody{flex:1; min-width:0;}
.cs-theme .msg .mname{font-size:14px; font-weight:500; color:var(--text);}
.cs-theme .msg .mtext{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cs-theme .msg .mtime{font-size:12px; color:var(--faint); flex:none;}
.cs-theme .msg .dot{width:9px; height:9px; border-radius:50%; background:var(--orange); flex:none;}
/* 一覧行: .mbody は <a>（#contents a の font-size:20px が効く想定）。リンク装飾を打ち消し本文を縦中央に */
.cs-theme .msg .mbody{display:flex; align-items:center; text-decoration:none; color:inherit;}
.cs-theme .msg .mname{font-size:14px; line-height:1.4;}
.cs-theme .msg .member-box-11-btn{flex:none; margin-left:auto;}
.cs-theme .msg.active{background:var(--blue-50);}

/* ===== 7b. chat thread (message スレッド: 吹き出し / 送信パネル) ===== */
/* スクロール領域: ページが伸びすぎないよう内側スクロール */
.cs-theme #message-box{max-height:60vh; overflow-y:auto; padding:4px 2px;}
/* スクロールバーを常時可視化（macOS オーバーレイの自動消失＝「掴めない」を解消）。
   hover/focus で濃く＝「フォーカスきたら見える」。SP は overflow:visible のため PC のみ作用。
   ★Chrome/macOS は ::-webkit-scrollbar を効かせて classic バー化＝常時表示にする。
     scrollbar-width を指定すると Chrome が webkit 装飾を無視しオーバーレイ（自動消失）へ戻るため、
     Firefox 専用フォールバックは @supports で隔離して Chrome には当てない。 */
.cs-theme #message-box::-webkit-scrollbar{width:10px;}
.cs-theme #message-box::-webkit-scrollbar-track{background:transparent;}
.cs-theme #message-box::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px; border:2px solid transparent; background-clip:padding-box;}
.cs-theme #message-box:hover::-webkit-scrollbar-thumb, .cs-theme #message-box:focus-within::-webkit-scrollbar-thumb{background:var(--muted);}
.cs-theme #message-box::-webkit-scrollbar-thumb:hover{background:var(--blue-d);}
@supports not (selector(::-webkit-scrollbar)){
  .cs-theme #message-box{scrollbar-width:thin; scrollbar-color:var(--border) transparent;}
  .cs-theme #message-box:hover, .cs-theme #message-box:focus-within{scrollbar-color:var(--muted) transparent;}
}
.cs-theme .messages{list-style:none; margin:0; padding:0;}
.cs-theme .messages > li{margin:0 0 16px;}
/* 保存期間アラート / 区切り: 中央寄せの控えめ表示 */
.cs-theme .messages .msg_alert{display:block; text-align:center; font-size:11.5px; color:var(--faint); margin:2px 0 16px;}
/* 吹き出し行: アバター(.pic) + 本文(.text) の横並び */
.cs-theme .messages li.left-side,
.cs-theme .messages li.right-side{display:flex; align-items:flex-end; gap:10px;}
.cs-theme .messages li.right-side{flex-direction:row-reverse;}
/* アバター画像の暴走防止（原寸表示の修正） */
.cs-theme .messages li .pic{flex:none; width:36px;}
.cs-theme .messages li .pic img{width:36px; height:36px; border-radius:50%; object-fit:cover; display:block;}
/* 吹き出し本体 */
.cs-theme .messages li .text{
  max-width:70%; padding:10px 14px; line-height:1.7; font-size:14px; color:var(--text);
  border-radius:14px; word-break:break-word; box-shadow:var(--sh);
}
.cs-theme .messages li.left-side .text{background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px;}
.cs-theme .messages li.right-side .text{background:var(--blue-50); border:1px solid var(--blue-100); border-bottom-right-radius:4px;}
/* 吹き出し内の添付・画像 */
.cs-theme .messages li .text img{max-width:100%; height:auto; border-radius:10px;}
.cs-theme .messages li .text a{color:var(--blue-d);}
.cs-theme .messages li .text hr{border:0; border-top:1px solid var(--border);}
/* 日時 / 既読 */
.cs-theme .messages li .text .read{color:var(--mint); font-weight:700;}
/* SP: スレッドヘッダの相手名は一覧へ戻るリンク（.sp-btn_back_member_list）。
   旧CSS消滅で矢印が不可視＝ただのテキストに見えていたため、明確な「←戻る」ボタンに可視化 */
.cs-theme .user-info .sp-btn_back_member_list,
.cs-theme #contents .user-info .sp-btn_back_member_list{display:inline-flex; align-items:center; gap:9px; color:var(--blue-d); font-weight:700; text-decoration:none;}
.cs-theme .user-info .sp-btn_back_member_list .arrow{width:32px; height:32px; border-radius:50%; background:var(--blue-50); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.cs-theme .user-info .sp-btn_back_member_list .arrow::before{content:"\f060"; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:13px; color:var(--blue);}
/* 送信パネル */
.cs-theme .message-send{margin-top:10px; padding-top:12px; border-top:1px solid var(--border);}
.cs-theme #outer_box{display:flex; align-items:flex-end; gap:10px;}
.cs-theme #msg-textarea{flex:1; min-height:auto;}
.cs-theme #send-pc{
  flex:none; appearance:none; border:0; cursor:pointer;
  width:46px; height:46px; border-radius:var(--r-btn);
  background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff;
  font-size:17px; line-height:1; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-theme #send-pc:hover:not(:disabled){transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(37,99,235,.5);}
.cs-theme #send-pc:disabled{cursor:default; opacity:.6;}

/* ===== 8. buttons ===== */
.cs-theme .btn{display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-family:inherit; font-size:14px; font-weight:700; padding:11px 22px; border-radius:var(--r-btn); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);}
.cs-theme .btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff;}
.cs-theme .btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(37,99,235,.5);}
.cs-theme .btn-secondary{background:#fff; color:#334155; border:1px solid var(--input-b);}
.cs-theme .btn-secondary:hover{background:#f7f9fd; border-color:var(--border-h);}
.cs-theme .btn-accent{background:var(--orange); color:#fff;}
.cs-theme .btn-accent:hover{transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(251,106,44,.5);}
.cs-theme .btn-sm{padding:8px 16px; font-size:13px;}

/* ===== 9. savebar ===== */
.cs-theme .savebar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-top:1px solid var(--border); box-shadow:0 -8px 24px -16px rgba(13,22,42,.25);
}
.cs-theme .savebar .inner{max-width:880px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:12px;}
.cs-theme .savebar .note{font-size:12px; color:var(--faint); margin-right:auto;}
.cs-theme .savebar .note b{color:var(--orange-d); font-weight:700;}

/* ===== 10. misc (profile row / member badge pill / cta banner) ===== */
.cs-theme .pill{display:inline-flex; align-items:center; gap:6px; background:var(--blue-50); color:var(--blue-d); font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px;}
.cs-theme .prow{display:flex; align-items:center; gap:18px; padding:16px 0;}
.cs-theme .prow .pimg{width:84px; height:84px; border-radius:50%; flex:none; background:linear-gradient(140deg,var(--blue-l),var(--blue-d)); color:#fff; font-size:34px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(37,99,235,.6);}
.cs-theme .prow figure.pimg{margin:0; overflow:hidden;}
.cs-theme .prow .pimg img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.cs-theme .prow .pinfo .pname{font-size:16px; font-weight:700; color:var(--strong);}
.cs-theme .prow .pinfo .pmeta{font-size:12.5px; color:var(--faint);}
.cs-theme .prow .pbtn{margin-left:auto;}

/* CTA banner (from hub-v3) */
.cs-theme .cta{margin-top:30px; display:flex; align-items:center; gap:18px; background:linear-gradient(118deg,var(--blue) 0%, var(--blue-d) 100%); border-radius:var(--r-lg); padding:22px 26px; color:#fff; text-decoration:none; box-shadow:0 16px 32px -12px rgba(37,99,235,.6); position:relative; overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.cs-theme .cta::after{content:""; position:absolute; top:-50px; right:70px; width:220px; height:220px; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 64%);}
.cs-theme .cta:hover{transform:translateY(-2px); box-shadow:0 22px 40px -12px rgba(37,99,235,.68);}
.cs-theme .cta .cicon{width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; position:relative; z-index:1;}
/* コネスポロゴ入りチップ（青地ではロゴ色が潰れるため白地） */
.cs-theme .cta .cicon--logo{background:#fff;}
.cs-theme .cta .cicon--logo img{width:60%; height:64%; object-fit:contain; display:block;}
.cs-theme .cta .ctxt{position:relative; z-index:1; flex:1; min-width:0;}
.cs-theme .cta .ctxt .t{display:block; font-size:17px; font-weight:700;}
.cs-theme .cta .ctxt .s{display:block; font-size:12.5px; color:rgba(255,255,255,.82); margin-top:2px;}
.cs-theme .cta .arrow{margin-left:auto; width:46px; height:46px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; font-size:16px; flex:none; box-shadow:0 8px 18px -5px rgba(251,106,44,.65); transition:transform .25s var(--ease); position:relative; z-index:1;}
.cs-theme .cta:hover .arrow{transform:translateX(5px);}

/* ===== 10b. account category grid (main.html / アカウントTOP) ===== */
.cs-theme .acct-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin:0 0 8px;}
/* カード本体は <a> で全面リンク化。3状態は modifier クラスで出し分け */
.cs-theme .acard{position:relative; display:flex; flex-direction:column; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh); padding:20px; text-decoration:none; color:inherit; transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);}
.cs-theme .acard:hover{transform:translateY(-3px); box-shadow:var(--sh-h); border-color:var(--border-h);}
.cs-theme .acard .asport{display:flex; align-items:center; gap:12px;}
.cs-theme .acard .achip{width:44px; height:44px; border-radius:13px; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:19px; flex:none;}
/* 種目別 SVG イラスト（案2 デュオトーン）を薄色チップ内に中央配置。
   状態に関係なく同じ種目アイコンを表示するため、チップ背景は全状態で薄ブルーtintに統一 */
.cs-theme .acard .achip svg{width:28px; height:28px; display:block; flex:none;}
.cs-theme .acard .aname{font-size:16px; font-weight:700; color:var(--strong); line-height:1.3;}
.cs-theme .acard .aledger{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;}
.cs-theme .acard .alink{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--blue);}
.cs-theme .acard .alink i{font-size:12px; transition:transform .22s var(--ease);}
.cs-theme .acard:hover .alink i{transform:translateX(3px);}
.cs-theme .acard .abadge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; letter-spacing:.02em;}
/* active: 利用中（登録済みパネルは薄ブルー地で強調。チップ・バッジは白に反転して
   種目アイコン/状態ラベルを際立たせる） */
.cs-theme .acard.is-active{background:var(--blue-50); border-color:var(--blue-100);}
.cs-theme .acard.is-active .achip{background:#fff;}
.cs-theme .acard.is-active .abadge{background:#fff; color:var(--blue-d);}
/* inactive: 未登録（控えめ＋オレンジの登録導線） */
.cs-theme .acard.is-inactive{background:#fbfcfe; border-style:dashed; box-shadow:none;}
.cs-theme .acard.is-inactive .achip{background:var(--blue-50); color:var(--blue);}
.cs-theme .acard.is-inactive .aname{color:var(--muted);}
.cs-theme .acard.is-inactive .alink{color:var(--orange-d);}
.cs-theme .acard.is-inactive .abadge{background:#eef1f7; color:var(--muted);}
/* suspended: 休会中（控えめ＋再開導線） */
.cs-theme .acard.is-suspended{background:#fbfcfe; box-shadow:none;}
.cs-theme .acard.is-suspended .achip{background:var(--blue-50); color:var(--blue);}
.cs-theme .acard.is-suspended .aname{color:var(--muted);}
.cs-theme .acard.is-suspended .alink{color:var(--orange-d);}
.cs-theme .acard.is-suspended .abadge{background:var(--orange-50); color:var(--orange-d);}
.cs-theme .acct-empty{font-size:13.5px; color:var(--muted); padding:6px 2px;}

/* ===== 11. responsive (640px) ===== */
@media (max-width:640px){
  /* SP の左右余白は #container 側で一括管理する。理由: 見出し(.phead)・タブ(#menubar)は
     #main.cs-wrap の外（#container 直下）にあり、.cs-wrap の padding が効かず左端べた付きに
     なるため。container に寄せ、.cs-wrap 側の左右は 0 にして全要素を同じ18pxから始める */
  body.cs-theme #container{padding-left:18px; padding-right:18px;}
  .cs-theme .cs-wrap{padding:20px 0 130px;}
  .cs-theme .phead h1{font-size:20px;}
  .cs-theme .tabs{gap:4px; padding:4px;}
  .cs-theme .tab, .cs-theme #contents .tab{padding:9px 4px; font-size:13px; white-space:nowrap;}
  /* SP はタブの補足ラベル（メンバー情報/教えたい/習いたい）を隠して3タブを画面内に収める */
  .cs-theme .tab .cnt{display:none;}
  .cs-theme .frow{grid-template-columns:1fr; gap:6px; padding:13px 0;}
  .cs-theme .frow .flabel{padding-top:0;}
  .cs-theme .sel{max-width:none;}
  .cs-theme .card .cbody{padding:4px 16px 14px;}
  .cs-theme .card .chead{padding:14px 16px;}
  .cs-theme .prow{flex-wrap:wrap;}
  .cs-theme .prow .pbtn{margin-left:0; width:100%;}
  .cs-theme .prow .pbtn .btn{width:100%; justify-content:center;}
  .cs-theme .dl{grid-template-columns:1fr;}
  .cs-theme .dl .dt{padding:9px 0 0; border-bottom:0; font-size:12px;}
  .cs-theme .dl .dd{padding:2px 0 9px;}
  .cs-theme .savebar .note{display:none;}
  .cs-theme .savebar .inner{padding:10px 14px;}
  .cs-theme .savebar .btn{flex:1; justify-content:center;}
  /* SP も「ロゴ｜文言｜矢印」の1行構成を維持（wrap させると矢印が孤立して不格好） */
  .cs-theme .cta{padding:18px 16px; gap:14px;}
  .cs-theme .cta .cicon{width:44px; height:44px;}
  .cs-theme .cta .ctxt .t{font-size:15.5px;}
  .cs-theme .cta .arrow{width:40px; height:40px; font-size:14px;}
  /* SP は1カラム固定（2カラムだと「テニス/マイペ/ージ」のような惨めな折返しになる） */
  .cs-theme .acct-grid{grid-template-columns:1fr; gap:12px;}
  .cs-theme .acard{padding:16px 18px; flex-direction:row; align-items:center; gap:14px;}
  .cs-theme .acard .asport{flex:1; min-width:0;}
  .cs-theme .acard .aledger{margin-top:0; margin-left:auto; flex:none; gap:12px;}
  .cs-theme .acard .alink, .cs-theme .acard .abadge{white-space:nowrap;}
  /* SP はリンク文言を矢印アイコンだけに（カード全体がリンクなので意味は不変・名前の折返しを防ぐ） */
  .cs-theme .acard .alink{font-size:0; gap:0;}
  .cs-theme .acard .alink i{font-size:16px;}
  /* SP: 一覧 / スレッドの片ペイン表示 + 相手名の二重表示解消（PC で表示・SP で非表示の出し分け） */
  .cs-theme .sp-none{display:none !important;}
  /* SP: スレッドヘッダ（←戻る｜名前 ／ プロフィール｜ブロック）— 収まらない分はボタン群を2行目へ */
  .cs-theme .user-info{flex-wrap:wrap; gap:8px;}
  .cs-theme .user-info .san{white-space:nowrap;}
  .cs-theme .user-info .btn{padding:7px 11px; font-size:12px; white-space:nowrap;}
}
/* PC では pc-none を隠す（message スレッドヘッダの相手名の二重表示を視覚解消） */
@media (min-width:641px){
  .cs-theme .pc-none{display:none !important;}
}

/* ===== 12. a11y (reduced-motion / visually-hidden) ===== */
/* JS が参照する要素を DOM に残したまま視覚的にだけ隠す（相手名の重複表示対策で使用） */
.cs-theme .cs-visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media (prefers-reduced-motion:reduce){
  .cs-theme *{transition:none !important; animation:none !important;}
}

/* ===== 14. hub (スポーツ別マイページTOP: ダークヒーロー＋メニューカード / 原器 prototype-hub-v3) ===== */
/* hero（ダーク地・radial グロー） */
.cs-theme .hub-hero{
  position:relative; overflow:hidden; border-radius:26px; padding:30px 34px;
  background:var(--ink); color:#fff; margin-bottom:18px;
  box-shadow:0 30px 60px -24px rgba(14,22,38,.55);
  display:flex; align-items:center; gap:26px;
}
.cs-theme .hub-hero-bg{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 88% -10%, rgba(37,99,235,.40), transparent 46%),
    radial-gradient(circle at 4% 120%, rgba(251,106,44,.22), transparent 46%);}
.cs-theme .hub-hero-bg::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(116deg, transparent 0 92px, rgba(255,255,255,.035) 92px 93px);}
.cs-theme .hub-hero > *{position:relative; z-index:1;}
.cs-theme .hub-hero .who{min-width:0;}
.cs-theme .hub-hero .greet{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--orange);}
.cs-theme .hub-hero .name{font-size:26px; font-weight:900; color:#fff; letter-spacing:.01em; line-height:1.2; margin:3px 0 9px; overflow-wrap:anywhere;}
/* .pill の白抜き variant（ダーク地用・.pill と併用する） */
.cs-theme .pill-dark{background:rgba(255,255,255,.1); color:#e9eefb; border:1px solid rgba(255,255,255,.14);}

/* menu cards（機能ページの白カード .card と衝突しないよう m 接頭辞・<a> 全面リンク） */
.cs-theme .menu-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:16px; margin-top:14px;}
.cs-theme .mcard{
  position:relative; display:flex; flex-direction:column; gap:13px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:20px; text-decoration:none; color:var(--text); box-shadow:var(--sh); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.cs-theme .mcard::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--blue),var(--blue-l)); opacity:0; transition:opacity .3s var(--ease);}
.cs-theme .mcard:hover{transform:translateY(-5px); box-shadow:var(--sh-h); border-color:var(--border-h);}
.cs-theme .mcard:hover::before{opacity:1;}
.cs-theme .mcard:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
.cs-theme .mcard .mchip{width:46px; height:46px; border-radius:var(--r-chip); flex:none; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:20px; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);}
.cs-theme .mcard:hover .mchip{background:var(--blue); color:#fff; transform:scale(1.05) rotate(-3deg);}
.cs-theme .mcard .mlabel{font-size:15px; font-weight:500; line-height:1.4; color:var(--strong);}
.cs-theme .mcard .mmeta{font-size:12px; color:var(--faint); margin-top:-5px;}
.cs-theme .mcard .go{position:absolute; right:18px; bottom:18px; color:var(--faint); font-size:14px; opacity:0; transform:translateX(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);}
.cs-theme .mcard:hover .go{opacity:1; transform:translateX(0); color:var(--blue);}
/* 未読数バッジ（カード右上） */
.cs-theme .mcard .mbadge{position:absolute; top:14px; right:14px; min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:var(--orange); color:#fff; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(251,106,44,.34); font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  .cs-theme .hub-hero{padding:24px 20px;}
  .cs-theme .hub-hero .name{font-size:22px;}
  .cs-theme .menu-grid{grid-template-columns:1fr 1fr; gap:12px;}
  .cs-theme .mcard{padding:16px;}
}

/* ===== 15. BBS overrides（なんでも掲示板: tennis/golf/elseSports / body.cs-bbs 限定） =====
   BBS は #container/#contents が無く section#top + section#main.category 構成。
   §3/§13 の #container キー余白が発火しないため、ここで補う。cs_mypage(#container 系) の値は変更しない。
   ※ clearance の px は Phase0 計測の初期値（PC: header50+menu60、SP: header in-flow）。実機検証で微調整される。 */

/* --- chrome clearance: 最初の in-flow 要素 section#top に逃しを付与（#container padding-top の代替） --- */
body.cs-theme.cs-bbs section#top{ padding-top:120px; }
body.cs-theme.cs-bbs section#top h1{ max-width:840px; margin:0 auto; font-size:23px; font-weight:900; color:var(--strong); }
body.cs-theme.cs-bbs .phead{ max-width:840px; margin-left:auto; margin-right:auto; }

@media (max-width:767px){
  /* SP/タブレット幅: header は in-flow(50px)、.headermenu は absolute(top:50・実測 h62→下端112) で
     コンテンツに被る。section#top に menu 下端ぶんの逃しを与える（実機390で h1 が menu 裏に潜る退行の修正）。
     バナー時は §3 の :has(.proxy-banner) が body 余白+header/menu を押し下げるので追従する。 */
  body.cs-theme.cs-bbs section#top{ padding-top:72px; }
}
@media (max-width:640px){
  body.cs-theme.cs-bbs section#top{ padding-left:18px; padding-right:18px; }
  body.cs-theme.cs-bbs #main.cs-wrap{ padding-left:18px; padding-right:18px; }
}

/* --- 投稿一覧 section.list をフィード行に（CON-265 v2: アバター｜本文/メタ/タグ｜シェブロン・class 温存） --- */
.cs-bbs .bbs-list{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh); overflow:hidden; margin:0 0 4px; }
.cs-bbs section.list + section.list{ border-top:1px solid var(--border); }
.cs-bbs section.list > a{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) 18px; align-items:center; gap:3px 15px; padding:15px 18px; text-decoration:none; color:inherit; transition:background .18s var(--ease); }
.cs-bbs section.list > a::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--orange); transform:scaleY(0); transition:transform .2s var(--ease); }
.cs-bbs section.list > a:hover{ background:#f7f9fd; }
.cs-bbs section.list > a:hover::before{ transform:scaleY(1); }
.cs-bbs section.list figure{ margin:0; grid-row:1 / span 3; }
.cs-bbs section.list figure img{ width:48px; height:48px; border-radius:50%; object-fit:cover; display:block; background:var(--blue-100); box-shadow:0 0 0 3px var(--blue-50); }
.cs-bbs section.list p.left_side{ margin:0; grid-column:2; font-size:15.5px; font-weight:700; color:var(--strong); line-height:1.45; overflow-wrap:anywhere; }
.cs-bbs section.list .bbs-meta{ grid-column:2; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--faint); margin-top:1px; }
.cs-bbs section.list .bbs-meta .who{ color:var(--muted); font-weight:500; }
.cs-bbs section.list .bbs-meta .sep{ width:3px; height:3px; border-radius:50%; background:var(--faint); flex:none; }
.cs-bbs section.list .bbs-meta .right_side{ white-space:nowrap; }
.cs-bbs section.list .tag_bbs{ grid-column:2; display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.cs-bbs section.list .chev{ grid-column:3; grid-row:1 / span 3; color:var(--faint); font-size:14px; opacity:0; transform:translateX(-5px); transition:opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease); }
.cs-bbs section.list > a:hover .chev{ opacity:1; transform:translateX(0); color:var(--blue); }
/* toolbar（件数＋アクション）: 浮いていた操作ボタンを文脈化 */
.cs-bbs .bbs-bar{ display:flex; align-items:center; gap:14px; margin:2px 0 14px; }
.cs-bbs .bbs-bar .count{ font-family:var(--display); font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.02em; display:flex; align-items:baseline; gap:6px; }
.cs-bbs .bbs-bar .count b{ font-size:21px; font-weight:800; color:var(--strong); }
.cs-bbs .bbs-bar .acts{ margin-left:auto; display:flex; gap:9px; }
@media (max-width:640px){
  .cs-bbs .bbs-bar{ flex-wrap:wrap; gap:10px; }
  .cs-bbs .bbs-bar .acts{ width:100%; margin-left:0; }
  .cs-bbs .bbs-bar .acts input[type=button], .cs-bbs .bbs-bar .acts .btn{ flex:1; justify-content:center; }
  .cs-bbs section.list > a{ grid-template-columns:44px minmax(0,1fr); padding:14px 15px; }
  .cs-bbs section.list figure img{ width:44px; height:44px; }
  .cs-bbs section.list .chev{ display:none; }
}

/* --- タグ pill（一覧 .tag_bbs / 詳細のタグ。色クラス3種を温存・テーマ寄せ） --- */
.cs-bbs .tag_bbs > div, .cs-bbs #member td > .tagBlue, .cs-bbs #member td > .tagRed, .cs-bbs #member td > .tagWhite{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; }
.cs-bbs .tagBlue{ background:var(--blue-50); color:var(--blue-d); }
.cs-bbs .tagRed{ background:var(--orange-50); color:var(--orange-d); }
.cs-bbs .tagWhite{ background:var(--bg); color:var(--muted); border:1px solid var(--border); }

/* --- 詳細 disp の table.ta1#member を見やすく --- */
.cs-bbs #member{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; }
.cs-bbs #member th{ width:120px; text-align:left; font-size:12.5px; color:var(--muted); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:top; background:#fbfcfe; }
.cs-bbs #member td{ font-size:14px; color:var(--strong); padding:11px 14px; border-bottom:1px solid var(--border); }
.cs-bbs #member textarea.info{ width:100%; min-height:120px; border:1px solid var(--input-b); border-radius:var(--r-input); padding:10px 13px; font:inherit; color:var(--text); background:#fff; resize:vertical; }

/* --- 投稿フォーム table.ta1（#input 配下）を縦積みフォームに --- */
.cs-bbs #input .ta1{ width:100%; border-collapse:collapse; }
.cs-bbs #input .ta1 th{ display:block; text-align:left; font-size:13.5px; font-weight:500; color:var(--strong); padding:14px 0 4px; }
.cs-bbs #input .ta1 td{ display:block; padding:0 0 6px; }
.cs-bbs #input .ta1 input[type=text], .cs-bbs #input .ta1 textarea, .cs-bbs #input .ta1 select{ width:100%; font:inherit; font-size:14px; color:var(--text); border:1px solid var(--input-b); border-radius:var(--r-input); background:#fff; padding:10px 13px; }
.cs-bbs #input .ta1 textarea{ min-height:120px; resize:vertical; }
.cs-bbs #input .ta1 input:focus, .cs-bbs #input .ta1 textarea:focus, .cs-bbs #input .ta1 select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.cs-bbs #input .ta1 select{ max-width:160px; }
.cs-bbs #input .ta1 .date_p{ max-width:200px; }
.cs-bbs #input .red{ color:var(--orange-d); font-weight:700; }

/* --- タグ選択 .tag（チェックボックス input.check + label.check）を pill 化 --- */
.cs-bbs .tag{ display:flex; flex-wrap:wrap; gap:9px; padding:4px 0; }
.cs-bbs .tag input.check{ position:absolute; opacity:0; width:1px; height:1px; }
.cs-bbs .tag label.check{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500; color:var(--muted); background:#fff; border:1.5px solid var(--input-b); border-radius:999px; padding:7px 15px; cursor:pointer; transition:all .18s var(--ease); user-select:none; }
.cs-bbs .tag input.check:checked + label.check{ color:var(--blue-d); background:var(--blue-50); border-color:var(--blue); }
.cs-bbs .tag input.check:focus-visible + label.check{ box-shadow:0 0 0 3px rgba(37,99,235,.25); }

/* --- 素の input[type=button/submit] を btn 風に（個別 .btn 付与が基本・漏れの保険） --- */
.cs-bbs #main .center input[type=button], .cs-bbs #main .center input[type=submit], .cs-bbs #main .form-actions input[type=button], .cs-bbs #main .form-actions input[type=submit]{ appearance:none; border:0; cursor:pointer; font:inherit; font-size:14px; font-weight:700; padding:11px 22px; border-radius:var(--r-btn); margin:4px; background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; transition:transform .2s var(--ease), box-shadow .2s var(--ease); }
.cs-bbs #main .center input[type=button][value*="戻る"], .cs-bbs #main .center input[type=button][value*="キャンセル"], .cs-bbs #main .center input[type=button][value*="クリア"]{ background:#fff; color:#334155; border:1px solid var(--input-b); }

/* --- list_foot（件数+ページング）/ 結果メッセージ h4,h6 / 通報 --- */
.cs-bbs .list_foot{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 2px; font-size:13px; color:var(--muted); }
.cs-bbs .list_foot span{ margin-right:auto; }
.cs-bbs .list_foot .btn{ padding:8px 16px; }
.cs-bbs #main h4{ font-size:16px; font-weight:700; color:var(--strong); }
.cs-bbs #main h6{ font-size:15px; font-weight:700; color:var(--strong); margin:8px 0; }
.cs-bbs .exp{ font-size:13px; color:var(--muted); margin-bottom:6px; }
.cs-bbs .btn_report{ background:var(--orange); color:#fff; }
/* 通報ボタン: 旧 style.css の #reportImage 画像が消えた分を FA 旗アイコン＋「通報」ラベルで代替 */
.cs-bbs #but_report #reportImage::before{ content:"\f024"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:6px; }
.cs-bbs #but_report #reportImage::after{ content:"通報"; }

/* ===== 16. member-individual overrides（会員個別ページ: tennis/golf/elseSports / body.cs-member-individual 限定） =====
   サイトヘッダーは {sport}_header_individual.css 系。実測(2026-06-12): PC は cs_mypage と同寸
   （header fixed50 + .headermenu fixed top:50 h:60、既存 #container padding-top:120px）→ §3 の既定がそのまま正。
   SP は cs_mypage と別物: .headermenu が fixed top:0・実高113px（ニックネーム行込みのタブ帯）のため、
   §3 の SP 76px では content がメニュー裏に潜る。バナー時も §3 の .headermenu top:90px（cs_mypage の
   banner40+header50 前提）が合わないため、banner 実高40px 直下=top:40px へ是正する。
   cs_mypage / BBS の既存ルールは変更しない（追記のみ・§13 は末尾固定を維持）。 */
@media (max-width:767px){
  /* fixed メニュー実高113px + 余裕17px。バナー時は §3 の body padding-top:40 が加算され
     content=40+130=170 ≥ banner40+menu113=153 で同等の余裕が保たれる */
  body.cs-theme.cs-member-individual #container{ padding-top:130px; }
  /* バナー時: §3 の top:90px(cs_mypage値) と proxy_banner の top:34px(!important) に詳細度で勝ち banner 直下へ */
  html body.cs-theme.cs-member-individual:has(.proxy-banner) .headermenu{ top:40px !important; }
}

/* --- 旧 style.css の枠組み打ち消し: #container 固定幅(990px)・SP の margin/overflow を解除 --- */
body.cs-theme.cs-member-individual #container{ width:auto; max-width:none; margin:0; overflow-x:visible; }
/* phead h1 は旧 #container h1（ID詳細度）に負けるため再宣言 */
.cs-member-individual #container .phead h1{ margin:6px 0 2px; font-size:23px; }
/* 中間幅(641〜959)は #container 余白が無く phead/タブが画面端に付くため逃しを付与 */
@media (min-width:641px) and (max-width:959px){
  .cs-member-individual .phead, .cs-member-individual #formNav{ padding-left:18px; padding-right:18px; }
}

/* === 案A 配色（Optic 寄せ・全スポーツ共通）======================================
   個人ページの差し色を検索ページ(Optic)と統一する。スポーツ別(--acc/--clay)には分けず固定値。
   - 背景  : 検索と同じ optic yellow の極薄ラジアル（旧 青ドットグリッドを置換）
   - kicker: terracotta #c1481f（eyebrow / information 見出し / リンク）
   - タブ active: ink #1b1712（各タブ規則で個別指定）
   ※ 意味的タグ色（tagWhite/tagBlue/tagRed＝マイページ編集と共有）は変更しない。 */
body.cs-theme.cs-member-individual{
  background-image:radial-gradient(120% 120% at 82% 4%, rgba(216,242,74,.10), transparent 46%);
  background-size:auto;
}
.cs-member-individual .phead .eyebrow{ color:#c1481f; }

/* --- PCタブ #menubar: 旧 nav#menubar ul li 系（ID詳細度）をテーマのセグメント型に上書き --- */
.cs-member-individual #formNav{ max-width:840px; margin:20px auto 0; }
.cs-member-individual nav#menubar ul li{ float:none; width:auto; margin:0; display:contents; }
.cs-member-individual nav#menubar ul li a{
  /* row+wrap 前提の設計（ラベルとバッジⓘを1行目、.cnt を basis:100% で2行目へ）。
     §3 .tab の flex-direction:column が残ると basis:100% が高さ要求になり崩壊するため row を明示 */
  flex:1; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:1px 6px;
  margin:0; padding:9px 6px 10px; border-bottom:0; background:none; border-radius:10px;
  color:var(--muted); font-size:14px; font-weight:700; letter-spacing:.01em; line-height:1.4;
  text-align:center; cursor:pointer; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.cs-member-individual nav#menubar ul li a:hover{ border-bottom:0; background:var(--bg); color:var(--strong); }
/* 選択状態は Smarty(aria-selected) と JS(li.current) の両系を受ける（hover より後に置く） */
.cs-member-individual nav#menubar ul li.current a,
.cs-member-individual nav#menubar .tab[aria-selected="true"]{
  border-bottom:0; background:#1b1712; color:#fff;   /* 案A: 検索ページと地続き＝アクティブは ink（全スポーツ共通） */
  box-shadow:0 6px 14px -6px rgba(27,23,18,.45);
}
.cs-member-individual nav#menubar .tab span.cnt{
  flex-basis:100%; display:block; font-family:var(--display);
  font-size:10.5px; font-weight:500; color:var(--faint); letter-spacing:.02em;
}
.cs-member-individual nav#menubar ul li.current a span.cnt,
.cs-member-individual nav#menubar .tab[aria-selected="true"] span.cnt{ color:rgba(255,255,255,.78); }
/* コーチ/生徒バッジ（JS が .none を外して表示する i 要素） */
.cs-member-individual nav#menubar .tab i.fas{ font-size:12px; color:var(--orange); }

/* --- コンタクト #but_contact: 旧CSSの fixed 配置（PC右下/SP右上）をやめタブ直下のインライン主ボタンに --- */
.cs-member-individual #but_contact{
  position:static; display:inline-flex; align-items:center; width:auto; height:auto;
  margin:0; padding:11px 22px; border:1px solid rgba(193,72,31,.28); border-radius:var(--r-btn);
  background:#faf0ea; color:#c1481f; /* 案A: コンタクトも member profile の差し色 terracotta に統一（淡地＋濃文字） */
  font-size:14px; font-weight:700; text-decoration:none; box-shadow:none; z-index:auto;
}
.cs-member-individual #but_contact:hover{
  margin:0; border-color:rgba(193,72,31,.5); color:#9e3a18;
  background:#f3e0d4;
  transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(193,72,31,.42);
}
.cs-member-individual #but_contact div{ margin:0; display:inline-flex; align-items:center; gap:8px; font-size:14px; }
/* mail.png（濃灰）を文字色に合わせて terracotta へ寄せる */
.cs-member-individual #but_contact img{ height:18px; width:auto; filter:brightness(0) saturate(100%) invert(30%) sepia(57%) saturate(1234%) hue-rotate(346deg) brightness(94%) contrast(90%); }

/* --- レイアウト枠: savebar の無いページなので下余白を詰める（§13 の (1,2,2) に勝つ詳細度で） --- */
body.cs-theme.cs-member-individual #main.cs-wrap{ padding-bottom:40px; }
/* #main_bbs（最新掲示ウィジェット）は #main と別枠 → §13 のリセット対象外なので個別に整える */
.cs-member-individual #main_bbs{ float:none; width:auto; max-width:880px; margin:0 auto; padding:0 20px 60px; }
@media (max-width:640px){
  .cs-member-individual #main_bbs{ padding:0 0 80px; }
}

/* --- SPサイトメニュー(.headermenu)のタブを PC #menubar と同じ cs_theme セグメント型に統一 ---
   SP(<481px)のみ表示の .headermenu（top:0固定・ニックネーム行＋3タブ帯）は元々 {sport}_header_individual.css の
   旧スタイル（ミント地＋アイコン）。PCデスクトップメニュー(.headermenu_pc)・cs_mypage・他セクションに波及させない
   ため body.cs-member-individual と :not(.headermenu_pc) で二重スコープ。≥481px で .headermenu は display:none の
   ため @media も 480px で一致させる。アクティブは SP markup 側に {if $st==…}aria-selected{/if} を追記し PC と
   同方式。不変フック（.but_about/teach/learn・通知バッジ icon-coach-badge/icon-student-badge）は温存。 */
@media (max-width:480px){
  .cs-member-individual .headermenu:not(.headermenu_pc){
    background:var(--surface); border-bottom:1px solid var(--border); /* cs_theme の白基調（旧サイトのミントは使わない） */
    box-shadow:0 4px 16px -10px rgba(14,22,38,.4);
  }
  .cs-member-individual .headermenu:not(.headermenu_pc) > h6{
    margin:0; padding:12px 16px 9px; border:0;
    font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); letter-spacing:.01em;
  }
  /* タブ帯 → セグメントコントロールのトラック（§3 .tabs と同値） */
  .cs-member-individual .headermenu:not(.headermenu_pc) ul{
    display:flex; gap:6px; margin:0 12px 12px; padding:5px;
    background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh);
  }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li{ flex:1; width:auto; padding:0; text-align:center; }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:46px; padding:7px 4px; border-radius:10px;
    color:var(--muted); font-size:11px; font-weight:700; line-height:1.2; letter-spacing:.01em;
    text-decoration:none; cursor:pointer;
    transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .1s var(--ease);
  }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li a div{ margin:0; }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li img{ height:17px; width:auto; display:block; }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li a:active{ transform:scale(.97); }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li a:focus-visible{ outline:2px solid #c1481f; outline-offset:2px; }
  /* アクティブ＝ PC と同じ ink（案A: 検索と地続き・全スポーツ共通） */
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li a[aria-selected="true"]{
    background:#1b1712; color:#fff;
    box-shadow:0 6px 14px -6px rgba(27,23,18,.45);
  }
  .cs-member-individual .headermenu:not(.headermenu_pc) ul li a[aria-selected="true"] img{ filter:brightness(0) invert(1); }
}

/* --- 見出し: 旧CSSの h5 装飾（青箱+リボン角）/ h6（25px灰）をテーマ見出しに --- */
.cs-member-individual #main h5, .cs-member-individual #main_bbs h5{
  position:static; background:none; box-shadow:none; border:0; padding:0;
  margin:26px 2px 14px; font-size:16.5px; font-weight:700; color:var(--strong); text-align:left;
}
.cs-member-individual #main h5:after, .cs-member-individual #main_bbs h5:after{ content:none; }
.cs-member-individual #main > h5:first-child, .cs-member-individual #main_bbs > h5:first-child{ margin-top:0; }
.cs-member-individual #main h6{ font-size:16px; font-weight:700; color:var(--strong); margin:18px 2px 10px; line-height:1.5; }

/* --- 本文テキスト: 旧CSSの #main p（padding:15px / SPで overflow:scroll・11px）を正常化 --- */
.cs-member-individual #main p{ padding:0; margin:0 0 10px; font-size:14px; line-height:1.7; overflow:visible; }
.cs-member-individual #main p.exp{ padding:0; margin:6px 0 0; font-size:14px; color:var(--text); overflow:visible; }
/* 【興味のある種目】等の小見出し（旧: 18px青+下線）→ ラベル調 */
.cs-member-individual #main strong.color1{
  display:block; margin:18px 0 8px; padding:0; border:0;
  font-size:13.5px; font-weight:700; color:var(--strong); line-height:1.5;
}

/* --- カード化: about の article（member_main / 本体）・teach/learn の #exp1・最新掲示を白カードに --- */
.cs-member-individual #main > article,
.cs-member-individual #main > #exp1,
.cs-member-individual #main_bbs article{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--sh); padding:18px 22px; margin-bottom:18px;
}

/* --- member_main の写真ブロック section.list: 旧グラデ箱+吹き出しを「写真+キャッチ+メタピル」の行型に --- */
.cs-member-individual #main section.list{
  border:0; background:none; box-shadow:none; padding:0; margin:0 0 8px; overflow:visible;
  display:grid; grid-template-columns:112px 1fr; gap:8px 18px; align-items:start;
}
.cs-member-individual #main section.list figure{ grid-row:1 / span 2; margin:0; }
.cs-member-individual #main section.list figure img{
  float:none; width:112px; height:112px; object-fit:cover; border-radius:18px;
  margin:0; padding:0; border:1px solid var(--border); background:#efe9df; box-shadow:var(--sh);
}
/* キャッチメッセージ（一言メモ）→ 検索結果カードと同じ中立グレー（薄グレー塗り＋濃グレー文字。search_top の section.list h4 と同値・タグのカテゴリ色と喧嘩しない） */
.cs-member-individual #main section.list p{
  position:static; margin:0; padding:10px 14px; background:#eceef2; color:#46423c; border:0;
  border-radius:12px; font-size:14px; font-weight:500; line-height:1.6; overflow:visible;
}
.cs-member-individual #main section.list p:after{ content:none; }
/* 性別/年代/レベル/エリアのメタ（li 直書き）をピル化 */
.cs-member-individual #main section.list div{
  margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; font-size:12.5px; line-height:1.5; color:var(--muted);
}
.cs-member-individual #main section.list div li{
  list-style:none; display:inline-flex; align-items:center; padding:3px 11px;
  background:#fff; border:1px solid #a6d4b6; border-radius:999px;
  font-size:12px; font-weight:700; color:#2c8650;   /* 検索結果タグと同じフォレスト緑で統一 */
}

/* --- タグ表示（読み取り専用チェック群）: 旧 style_inputForm.css の白丸トグルピルをテーマピルに --- */
.cs-member-individual .tag{ display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 14px; padding:0; overflow:visible; }
.cs-member-individual .tag input.check{ position:absolute; opacity:0; width:1px; height:1px; left:auto; }
.cs-member-individual .tag label.check{
  position:static; display:inline-flex; align-items:center; gap:7px; margin:0; padding:7px 15px;
  border:1.5px solid var(--input-b); border-radius:999px; background:#fff; color:var(--muted);
  font-size:13.5px; font-weight:500; line-height:1.4; white-space:nowrap; box-shadow:none;
  transition:all .18s var(--ease);
}
.cs-member-individual .tag label.check::before{
  content:"\f067"; font-family:"Font Awesome 5 Free"; font-weight:900;
  position:static; display:inline-block; width:auto; border:0; border-radius:0; background:none;
  font-size:10px; color:var(--faint); transition:none;
}
.cs-member-individual .tag input.check:checked + label.check{ color:var(--blue-d); background:var(--blue-50); border-color:var(--blue); }
.cs-member-individual .tag input.check:checked + label.check::before{ content:"\f00c"; background:none; color:var(--blue); }
.cs-member-individual .tag input.check:disabled + label.check{ cursor:default; }
.cs-member-individual .tag input.check:disabled:not(:checked) + label.check{ opacity:.55; }
/* タグ色は member_tag.class を活かす（編集画面と同義: tagWhite=緑 / tagBlue=青[上の既定] / tagRed=赤）。
   input に付く色クラスで出し分け。generic(:checked)と同詳細度なので後置で勝たせる。 */
.cs-member-individual .tag input.tagWhite:checked + label.check{ color:#3b6d11; background:#eef6e1; border-color:#9cc46a; }
.cs-member-individual .tag input.tagWhite:checked + label.check::before{ color:#5b8c1f; }
.cs-member-individual .tag input.tagRed:checked + label.check{ color:#a3243a; background:#fdebee; border-color:#e08e92; }
.cs-member-individual .tag input.tagRed:checked + label.check::before{ color:#d33a4f; }

/* --- information テーブル .ta1: カード内のフラットな定義行に（§15 #member の流儀） --- */
.cs-member-individual #main .ta1{
  width:100%; margin:6px 0 18px; border:0; background:transparent; border-collapse:collapse; position:static;
}
.cs-member-individual #main .ta1 th, .cs-member-individual #main .ta1 td{
  border:0; border-bottom:1px solid var(--border); padding:11px 0; text-align:left; vertical-align:top;
}
.cs-member-individual #main .ta1 th{ width:180px; padding-right:18px; background:transparent; font-size:13px; font-weight:500; color:var(--muted); }
.cs-member-individual #main .ta1 td{ width:auto; font-size:14px; color:var(--strong); line-height:1.7; word-break:break-word; }
.cs-member-individual #main .ta1 tr:last-child th, .cs-member-individual #main .ta1 tr:last-child td{ border-bottom:0; }
/* 1行目の見出しセル（information 等）は英字アイブロウ調のミニ見出しに */
.cs-member-individual #main .ta1 th.tamidashi{
  width:auto; text-align:left; background:transparent; color:#c1481f;   /* 案A: information ミニ見出し=terracotta */
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:2px 0 8px;
}
/* SNS ロゴ/バナー画像が行を壊さないよう高さを揃える */
.cs-member-individual #main .ta1 td img{ max-height:40px; width:auto; vertical-align:middle; }
.cs-member-individual #main .ta1 a{ color:#c1481f; text-decoration:none; }
.cs-member-individual #main .ta1 a:hover{ color:#9e3a18; text-decoration:underline; }

/* 読み取り専用 textarea.info（旧: 高さ50px固定で長文が切れる）→ 枠なしテキスト表示 */
.cs-member-individual textarea.info{
  display:block; width:100%; height:auto; min-height:1.7em; margin:0; padding:0;
  border:0; background:transparent; font:inherit; line-height:1.7; color:inherit;
  resize:none; overflow:hidden; pointer-events:none;
  field-sizing:content; /* Chromium: 内容に合わせ自動伸長（非対応は rows 準拠） */
}

/* --- アクセス数/いいね行 .list_foot と p6 --- */
.cs-member-individual .list_foot{
  height:auto; background:transparent; text-align:left; margin:4px 0 0; padding:8px 0 0;
  display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--muted);
}
.cs-member-individual p6{ display:inline-block; font-size:12.5px; color:var(--muted); }
.cs-member-individual .list_foot p6{ margin-right:auto; }
.cs-member-individual #exp1 > p6{ display:block; margin-top:10px; }
/* いいねボタン: 旧ネイビーグラデ(150x50・右float)を白のセカンダリ調に */
.cs-member-individual #but_good{
  float:none; width:auto; height:auto; margin:0; padding:8px 16px;
  background:#fff; border:1px solid var(--input-b); border-radius:var(--r-btn);
  color:#334155; font-size:13px; font-weight:700; box-shadow:none;
}
.cs-member-individual #but_good:hover{ background:#f7f9fd; border-color:var(--border-h); }
.cs-member-individual #goodImage{ width:20px; height:20px; background-size:contain; background-position:center; }

/* --- teach の評価行（星+口コミボタン） --- */
.cs-member-individual #main div:has(> .star5_rating){
  display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 2px 14px; font-size:13.5px; color:var(--muted);
}
.cs-member-individual .star5_rating{ font-size:16px; }
.cs-member-individual .button_input01{ width:auto; line-height:1.4; box-shadow:none; }

/* --- 最新掲示ウィジェット #main_bbs: §15 .bbs-list と同じ行型リストに --- */
.cs-member-individual #main_bbs section.list{ position:static; border:0; background:none; box-shadow:none; margin:0; padding:0; }
.cs-member-individual #main_bbs section.list + section.list{ border-top:1px solid var(--border); }
.cs-member-individual #main_bbs section.list > a{
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center;
  padding:13px 4px; overflow:visible; text-decoration:none; color:inherit;
  border-radius:10px; transition:background .2s var(--ease);
}
.cs-member-individual #main_bbs section.list > a:hover{ background:#f7f9fd; }
.cs-member-individual #main_bbs section.list p{ margin:0; padding:0; }
.cs-member-individual #main_bbs section.list p:first-of-type{ grid-column:1; font-size:14.5px; font-weight:700; color:var(--strong); overflow-wrap:anywhere; }
.cs-member-individual #main_bbs section.list p:last-of-type{ grid-column:2; grid-row:1; font-size:12px; color:var(--faint); white-space:nowrap; }
.cs-member-individual #main_bbs section.list > a > div{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 0; }
/* タグ色3種（行内のみ・input.check 側の色クラスへは波及させない） */
.cs-member-individual #main_bbs .tagBlue, .cs-member-individual #main_bbs .tagRed, .cs-member-individual #main_bbs .tagWhite{
  display:inline-flex; align-items:center; margin:0; padding:3px 10px; border:0; border-radius:999px; font-size:11.5px; font-weight:700;
}
.cs-member-individual #main_bbs .tagBlue{ background:var(--blue-50); color:var(--blue-d); }
.cs-member-individual #main_bbs .tagRed{ background:var(--red-bg); color:var(--red); }
.cs-member-individual #main_bbs .tagWhite{ background:var(--bg); color:var(--muted); border:1px solid var(--border); }

/* --- CTA（member_main のオンラインレッスン誘導）: カード内に置くため上余白を詰める
   ＋ 案1: 配色を ink（黒・タブと同じ）に・矢印を terracotta に（案A 調和。青を排除） --- */
.cs-member-individual #main .cta{
  margin-top:10px;
  background:#1b1712;   /* 案1 ink（黒・モダン）。白文字＋terracotta矢印 */
  box-shadow:0 16px 32px -12px rgba(27,23,18,.5);
}
.cs-member-individual #main .cta:hover{ box-shadow:0 22px 40px -12px rgba(27,23,18,.6); }
.cs-member-individual #main .cta .arrow{ background:#c1481f; box-shadow:0 8px 18px -5px rgba(193,72,31,.55); }

/* --- ボタン微調整: 旧CSSの input 固定幅(250px)/btn_login 灰グラデ/hover 紫グラデを是正 --- */
.cs-member-individual input[type="button"].btn, .cs-member-individual input[type="submit"].btn{ width:auto; min-width:160px; height:auto; box-shadow:none; }
.cs-member-individual input.btn-primary:hover{ background:linear-gradient(135deg,var(--blue),var(--blue-d)); }
.cs-member-individual input.btn-secondary:hover{ background:#f7f9fd; }
.cs-member-individual input[type="button"].btn_login{ width:auto; min-width:140px; font-size:14px; background:linear-gradient(135deg,var(--blue),var(--blue-d)); box-shadow:none; }

/* --- SP（≤640）調整 --- */
@media (max-width:640px){
  .cs-member-individual #main > article, .cs-member-individual #main > #exp1, .cs-member-individual #main_bbs article{ padding:14px 16px; }
  .cs-member-individual #main section.list{ grid-template-columns:88px 1fr; gap:8px 12px; }
  .cs-member-individual #main section.list figure img{ width:88px; height:88px; }
  .cs-member-individual #main .ta1 th{ width:110px; padding-right:12px; font-size:12.5px; }
  .cs-member-individual #but_contact{ width:100%; justify-content:center; }
}

/* ============================================================================
   16-R. review.html（口コミ）専用スキン — st=review_disp / review_input /
   reply_input / review_del / reply_del。旧 {sport}_member_individual/style_review.css
   の黒地スターピッカー・橙/水色の吹き出し(.cp_qa)・絶対配置アバターを打ち消す。
   DOM・name/id/onclick は HTML 側で完全温存（クラス追記のみ）＝装飾だけ差し替え。
   ============================================================================ */

/* --- 口コミ入力ボタン行（星表示+件数+口コミ入力）: about/teach と同じ評価行に --- */
.cs-member-individual #main .tab-content > div:first-child{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin:0 2px 18px; font-size:13.5px; color:var(--muted);
}

/* --- 口コミリスト .cp_qa: 旧吹き出し箱(橙/水色・影・▶)を「アバター+本文」の行カードに --- */
.cs-member-individual .cp_qa{ margin:0; }
.cs-member-individual .cp_qa dl{ margin:0 0 14px; }
.cs-member-individual .cp_qa dl + dl{ border-top:1px solid var(--border); padding-top:14px; }
/* dt=口コミ本体 / dd=コーチ返信。旧の left/right 60px マージン・橙水色背景・吹き出し三角を解除 */
.cs-member-individual .cp_qa dt,
.cs-member-individual .cp_qa dd{
  position:relative; box-shadow:none; border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--border);
  margin:0 0 10px; padding:14px 16px;
  display:grid; grid-template-columns:48px 1fr; gap:4px 14px; align-items:start;
}
.cs-member-individual .cp_qa dt.reply,
.cs-member-individual .cp_qa dd.reply{ margin:0; }
/* 返信(dd)は一段インデント＋淡い青地で「コーチからの返信」と判る */
.cs-member-individual .cp_qa dd{ margin-left:28px; background:var(--blue-50); border-color:var(--blue-100); }
.cs-member-individual .cp_qa dt::before,
.cs-member-individual .cp_qa dd::before{ content:none; border:0; }
/* アバター(.pic_review=投稿者左 / .pic_coach=コーチ): 旧 absolute(-60px) → グリッド1列目に戻す */
.cs-member-individual .cp_qa .pic_review,
.cs-member-individual .cp_qa .pic_coach{
  position:static; top:auto; left:auto; right:auto;
  grid-column:1; grid-row:1 / span 2; width:48px; height:48px; margin:0;
}
.cs-member-individual .cp_qa .pic_review img,
.cs-member-individual .cp_qa .pic_coach img{
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  background:var(--blue-100); display:block;
}
.cs-member-individual .cp_qa .text{ grid-column:2; min-width:0; font-size:14px; color:var(--text); line-height:1.7; overflow-wrap:anywhere; }
.cs-member-individual .cp_qa .text .star5_rating{ font-size:15px; }
/* 日付+操作アイコン行（旧 inline style font-size:10px のラッパ） */
.cs-member-individual .cp_qa .text > div{ display:flex; align-items:center; gap:10px; margin-top:6px !important; font-size:12px !important; color:var(--faint); }
.cs-member-individual .cp_qa .text > div img{ width:16px; height:16px; opacity:.85; }
.cs-member-individual .cp_qa .text > div a:hover img{ opacity:1; }
/* 通報ボタン .btn_report2（旧 20x20 橙地）→ 透明な小アイコンボタン */
.cs-member-individual .btn_report2{
  width:auto; height:auto; margin:0; padding:0; border:0; background:none; cursor:pointer; line-height:0;
}
.cs-member-individual .btn_report2 img{ width:16px; height:16px; opacity:.7; transition:opacity .18s var(--ease); }
.cs-member-individual .btn_report2:hover img{ opacity:1; }

/* --- 件数+ページング .list_foot: review では §16 既定(いいね行)を上書きし両端配置に --- */
.cs-member-individual .tab-content .list_foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:8px 0 0; padding:14px 2px 0; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted);
}
.cs-member-individual .tab-content .list_foot span{ margin-right:auto; }
.cs-member-individual .tab-content .list_foot .btn{ min-width:auto; padding:8px 18px; }

/* --- 入力/返信/削除フォーム: section#contact をカード化（about の article 流儀） --- */
.cs-member-individual #main #contact{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--sh); padding:18px 22px; margin:0;
}
.cs-member-individual #main #contact .message{ margin:0 0 8px; }
.cs-member-individual #main #contact .exp{ margin:0 0 12px; }
.cs-member-individual #main #contact .red{ color:var(--orange-d); font-weight:700; }

/* 入力フォーム table.ta1#member（#input 配下）を縦積みに（§15 BBS と同戦略・#main 詳細度に勝つ） */
.cs-member-individual #main #input .ta1{ width:100%; margin:0; border:0; background:transparent; border-collapse:collapse; }
.cs-member-individual #main #input .ta1 th,
.cs-member-individual #main #input .ta1 td{ display:block; width:auto; border:0; padding:0; }
.cs-member-individual #main #input .ta1 th{ padding:14px 0 4px; font-size:13.5px; font-weight:700; color:var(--strong); }
.cs-member-individual #main #input .ta1 th.tamidashi{
  font-family:var(--display); font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); padding:2px 0 10px;
}
.cs-member-individual #main #input .ta1 th.narrow .red{ color:var(--orange-d); }
.cs-member-individual #main #input .ta1 td{ padding:0 0 6px; }
.cs-member-individual #main #input .ta1 td > p{ margin:0 0 8px; font-size:13px; color:var(--muted); line-height:1.6; }
.cs-member-individual #main #input .ta1 textarea{
  width:100%; min-height:140px; font:inherit; font-size:14px; color:var(--text);
  border:1px solid var(--input-b); border-radius:var(--r-input); background:#fff; padding:11px 13px; resize:vertical;
}
.cs-member-individual #main #input .ta1 textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16); }

/* --- 星評価入力 .cont/.stars/label.star: 旧 黒地(#111)ピッカー → 白地の素直な★選択に --- */
.cs-member-individual #main .cont{
  width:auto; max-width:none; margin:0; padding:0; background:none; color:inherit; border:0; border-radius:0; overflow:visible; text-align:left;
}
.cs-member-individual #main .stars{ width:auto; display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; padding:2px 0; }
.cs-member-individual #main label.star{
  float:none; padding:2px 3px; font-size:30px; color:var(--input-b);
  transition:transform .18s var(--ease), color .2s var(--ease);
}
.cs-member-individual #main label.star:before{ content:'\f006'; font-family:'FontAwesome'; } /* FA4 中空星 */
/* チェック済み(=その星以下)を金色に。row-reverse なので「直前～以降」の兄弟が右=低評価側 */
.cs-member-individual #main input.star:checked ~ label.star:before{ content:'\f005'; color:#f5a623; } /* FA4 塗り星 */
.cs-member-individual #main input.star-5:checked ~ label.star:before{ color:#f59e0b; text-shadow:none; }
.cs-member-individual #main input.star-1:checked ~ label.star:before{ color:#f59e0b; }
.cs-member-individual #main label.star:hover{ transform:scale(1.18); }

/* --- 注意事項チェック .ml15: 規約同意ブロックを淡カードに --- */
.cs-member-individual #main #contact .ml15{ display:block; margin:14px 0 0; }
.cs-member-individual #main #contact .ml15 > p{
  margin:0; padding:13px 15px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-input);
  font-size:12.5px; color:var(--muted); line-height:1.7;
}
.cs-member-individual #main #contact .ml15 label{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--strong); margin-bottom:6px; }
.cs-member-individual #main #contact .ml15 input[type=checkbox]{ width:16px; height:16px; accent-color:var(--blue); }
.cs-member-individual #main #contact .ml15 a{ color:var(--blue-d); text-decoration:underline; }

/* --- 送信/キャンセル列 .form-actions: 中央寄せ＋ボタン間隔 --- */
.cs-member-individual #main #contact .form-actions{ margin-top:18px; }
.cs-member-individual #main #contact .form-actions .c{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0; }
.cs-member-individual #main #contact .form-actions input.btn{ min-width:150px; }

/* --- 通報ボタン #but_report（返信フォーム内）: BBS と同じ橙ボタン＋FA 旗で文言補完 --- */
.cs-member-individual #but_report.btn_report{ background:var(--orange); color:#fff; padding:6px 14px; font-size:12.5px; vertical-align:middle; margin-left:4px; }
.cs-member-individual #but_report #reportImage::before{ content:"\f024"; font-family:"Font Awesome 5 Free"; font-weight:900; margin-right:6px; }
.cs-member-individual #but_report #reportImage::after{ content:"通報"; }

/* --- review SP（≤640）調整 --- */
@media (max-width:640px){
  .cs-member-individual #main #contact{ padding:14px 16px; }
  .cs-member-individual .cp_qa dt, .cs-member-individual .cp_qa dd{ grid-template-columns:40px 1fr; gap:4px 12px; padding:12px 14px; }
  .cs-member-individual .cp_qa dd{ margin-left:14px; }
  .cs-member-individual .cp_qa .pic_review, .cs-member-individual .cp_qa .pic_coach,
  .cs-member-individual .cp_qa .pic_review img, .cs-member-individual .cp_qa .pic_coach img{ width:40px; height:40px; }
  .cs-member-individual #main label.star{ font-size:26px; }
}

/* ============================================================================
   16-C. contact.html（メッセージ送信フォーム）専用スキン — st=input。
   DOM は section#contact > #input > .tab-content > form > table.ta1#member。
   フォームのカード化・行縦積み・.ml15・.form-actions は 16-R を再利用。
   ここでは review に無い「テキスト入力(.date_p)・select・宛先プロフィール行」だけ補う。
   クラス追記のみ＝name/id/onclick/validate は HTML 側で完全温存。
   ============================================================================ */

/* --- .tab-content は #input 直下のフォーム包み（review の評価行用ルールと衝突させない） --- */
.cs-member-individual #main #input .tab-content{ display:block; margin:0; }

/* --- 入力欄: 16-R は textarea のみ → text 入力・select を同じ枠線フォーム部品に --- */
.cs-member-individual #main #input .ta1 input[type=text],
.cs-member-individual #main #input .ta1 select{
  font:inherit; font-size:14px; color:var(--text);
  border:1px solid var(--input-b); border-radius:var(--r-input); background:#fff; padding:10px 13px;
}
.cs-member-individual #main #input .ta1 input[type=text]:focus,
.cs-member-individual #main #input .ta1 select:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.cs-member-individual #main #input .ta1 select#title{ width:100%; max-width:320px; }
/* 希望日（第1〜3希望）: ラベル文＋日付入力が1行ずつ並ぶ。入力幅を抑え行間を確保 */
.cs-member-individual #main #input .ta1 .date_p{ width:auto; max-width:200px; margin:2px 0; }
.cs-member-individual #main #input .ta1 td > p.def{ margin:0 0 8px; font-size:13px; color:var(--muted); line-height:1.6; }

/* --- 宛先プロフィール行: td 内 article>section.list。#main section.list グリッド skin が効くが
       td が display:block/padding:0 のため article を淡カードに、h4 を見出しに整える --- */
.cs-member-individual #main #input .ta1 td article{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-card);
  padding:14px 16px; margin:2px 0 4px;
}
.cs-member-individual #main #input .ta1 td article section.list{ margin:0; }
.cs-member-individual #main #input .ta1 td article section.list h4{
  grid-column:2; margin:0 0 4px; padding:0; border:0; font-size:14.5px; font-weight:700; color:var(--strong); line-height:1.4;
}
/* 宛先の写真(figure)が grid 行高に潰れて帯状(112×40)になる問題を是正: figure を明示配置＋固定正方形に
   （§16 #main section.list の figure skin に勝つ詳細度。子要素順 h4→figure→div でも正しく配置する） */
.cs-member-individual #main #input .ta1 td article section.list{ grid-template-columns:88px 1fr; align-items:start; }
.cs-member-individual #main #input .ta1 td article section.list figure{
  grid-column:1; grid-row:1 / span 2; align-self:start; width:88px; height:88px; margin:0;
}
.cs-member-individual #main #input .ta1 td article section.list figure img{
  width:88px; height:88px; max-height:none; object-fit:cover; border-radius:14px; border:1px solid var(--border); box-shadow:none;
}
.cs-member-individual #main #input .ta1 td article section.list > div{ grid-column:2; align-self:start; }

/* --- contact SP（≤640）調整 --- */
@media (max-width:640px){
  .cs-member-individual #main #input .ta1 select#title{ max-width:none; }
  .cs-member-individual #main #input .ta1 td article{ padding:12px 14px; }
}

/* ============================================================================
   16-L. online_lesson_contact.html（オンラインレッスン申込みフォーム）専用スキン
   — mode=online_lesson_contact / st=input。DOM は section#contact > #input >
   .tab-content > form#formApplication > table.ta1#member。フォームのカード化・
   .ml15・.form-actions・宛先 article は 16-R / 16-C を再利用。
   ここでは申込フォーム固有の差分だけ補う:
   (1) レッスン明細は読み取り専用 textarea.info の羅列 → 16-R の入力欄スキン
       (#input .ta1 textarea = min-height:140px / 枠線) が効いてしまうので素の
       フラット表示に戻す（§16 既定の textarea.info と同じ見え方へ）。
   (2) 編集可能なのはクーポン #coupon のみ → コンパクトな1行入力欄に。
   クラス追記のみ＝name/id/onclick/validate は HTML 側で完全温存。
   ============================================================================ */

/* (1) 明細セル: th.narrow を左ラベル・td を値として 2 カラム key/value に戻す
   （16-R の display:block 縦積みは申込明細では冗長なため、明細テーブルだけ上書き） */
.cs-member-individual #main #input .ta1#member th.narrow,
.cs-member-individual #main #input .ta1#member td{ display:table-cell; }
.cs-member-individual #main #input .ta1#member th.narrow{
  width:150px; padding:11px 16px 11px 0; vertical-align:top;
  border-bottom:1px solid var(--border); font-size:13px; font-weight:500; color:var(--muted);
}
.cs-member-individual #main #input .ta1#member > tbody > tr > td,
.cs-member-individual #main #input .ta1#member td{
  padding:11px 0; vertical-align:top; border-bottom:1px solid var(--border);
  font-size:14px; color:var(--strong); line-height:1.7;
}

/* 読み取り専用 textarea.info（タイトル/内容/値段/募集人数 等）: 16-R の入力欄装飾を打ち消し
   §16 既定の透明フラット表示に揃える（枠線・白地・min-height を解除） */
.cs-member-individual #main #input .ta1#member textarea.info{
  width:100%; min-height:1.7em; height:auto; margin:0; padding:0;
  border:0; background:transparent; resize:none; overflow:hidden;
  font:inherit; line-height:1.7; color:inherit; pointer-events:none; field-sizing:content;
}

/* (2) クーポン入力 #coupon（編集可・rows=1）: 16-R の 140px 高を上書きして1行枠線入力に */
.cs-member-individual #main #input .ta1#member textarea#coupon{
  width:100%; max-width:240px; min-height:auto; height:auto;
  border:1px solid var(--input-b); border-radius:var(--r-input); background:#fff;
  padding:10px 13px; resize:none; pointer-events:auto;
}
.cs-member-individual #main #input .ta1#member textarea#coupon:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.16);
}

/* サンプル動画/サンプルリンク: 行内に収め余白を整える */
.cs-member-individual #main #input .ta1#member video{ margin:4px 0 0; border-radius:var(--r-input); }
.cs-member-individual #main #input .ta1#member td > div a{ color:var(--blue-d); text-decoration:none; font-weight:500; }
.cs-member-individual #main #input .ta1#member td > div a:hover{ text-decoration:underline; }

/* online_lesson_contact SP（≤640）: 明細 key/value を縦積みに戻して幅を確保 */
@media (max-width:640px){
  .cs-member-individual #main #input .ta1#member th.narrow,
  .cs-member-individual #main #input .ta1#member td{ display:block; width:auto; border-bottom:0; }
  .cs-member-individual #main #input .ta1#member th.narrow{ padding:12px 0 2px; font-weight:700; color:var(--strong); }
  .cs-member-individual #main #input .ta1#member td{ padding:0 0 8px; border-bottom:1px solid var(--border); }
  .cs-member-individual #main #input .ta1#member textarea#coupon{ max-width:none; }
}

/* ===== 15.2 詳細(disp) 読み物カード化（CON-265 デザイン見直し） ===== */
.cs-bbs .post{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--sh); overflow:hidden; max-width:680px; }
.cs-bbs .post .phero{ padding:22px 26px 18px; border-bottom:1px solid var(--border); }
.cs-bbs .post .ptags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:11px; }
.cs-bbs .post .ptags > span, .cs-bbs .post .ptags > div{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 11px; border-radius:999px; line-height:1.5; white-space:nowrap; }
.cs-bbs .post h2{ font-size:21px; font-weight:900; color:var(--strong); margin:0 0 14px; line-height:1.4; overflow-wrap:anywhere; }
.cs-bbs .post .pby{ display:flex; align-items:center; gap:11px; }
.cs-bbs .post .pby .pav{ width:42px; height:42px; border-radius:50%; flex:none; overflow:hidden; background:var(--blue-50); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:17px; box-shadow:0 0 0 3px var(--blue-50); }
.cs-bbs .post .pby .pav img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-bbs .post .pby .pname{ font-size:14px; font-weight:700; color:var(--strong); }
.cs-bbs .post .pby .pname a{ color:var(--blue-d); text-decoration:none; }
.cs-bbs .post .pby .pname a:hover{ text-decoration:underline; }
.cs-bbs .post .pby .pdate{ font-family:var(--display); font-size:12px; color:var(--faint); }
.cs-bbs .post .pbody{ padding:20px 26px; font-size:14.5px; line-height:1.9; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.cs-bbs .post .pmeta{ margin:0; padding:0 26px 18px; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:13px; }
.cs-bbs .post .pmeta dt{ color:var(--faint); }
.cs-bbs .post .pmeta dd{ margin:0; color:var(--strong); font-weight:500; overflow-wrap:anywhere; }
.cs-bbs .post .pmeta dd a{ color:var(--blue-d); }
.cs-bbs .post .pacts{ display:flex; align-items:center; gap:10px; margin:0; padding:16px 26px; border-top:1px solid var(--border); background:#fbfcfe; }
.cs-bbs .post .pacts #but_report{ margin-left:auto; }
@media (max-width:640px){
  .cs-bbs .post{ max-width:none; }
  .cs-bbs .post .phero, .cs-bbs .post .pbody, .cs-bbs .post .pmeta{ padding-left:18px; padding-right:18px; }
  .cs-bbs .post .pacts{ padding:14px 18px; flex-wrap:wrap; }
  .cs-bbs .post .pacts .btn{ flex:1; justify-content:center; }
  .cs-bbs .post .pacts #but_report{ margin-left:0; width:100%; order:9; }
}

/* ===== 13. site chrome overrides（基本定義より後に置く＝カスケード順が生命線） ===== */
/* ⚠️ .savebar の基本定義（bottom:0）と同詳細度のルールを含むため、このブロックは必ずファイル末尾に置くこと */
/* cs_mypage.css の #contents{padding:0 20px; padding-top:60px} / #main{width:100%; margin:0} と
   .cs-wrap(max-width:880 margin:auto) の二重パディング・中央寄せ干渉をリセット。
   #container の上余白は cs_theme 側（§site chrome clearance）が一元管理するため padding-top も解除 */
body.cs-theme #contents{width:auto; max-width:none; float:none; margin:0; padding:0;}
body.cs-theme #main{width:auto; max-width:none; float:none; margin:0; padding:0;}
/* ↑のIDリセット（詳細度1,1,1）が .cs-wrap(0,2,0/880px) に勝つため、wrap 制約を同詳細度以上で再宣言 */
body.cs-theme #main.cs-wrap, body.cs-theme #contents.cs-wrap{max-width:880px; margin:0 auto; padding:28px 20px 120px;}
@media (max-width:640px){
  /* SP の左右余白は #container 側で持つため、ここでは横0（縦のみ）。詳細度1,1,1 で .cs-wrap の 0,2,0 に勝つので必須 */
  body.cs-theme #main.cs-wrap, body.cs-theme #contents.cs-wrap{padding:20px 0 130px;}
}
/* cs_mypage.css #contents a{font-size:20px; color:#2a33bd} が一覧名・本文リンク・日時を肥大化させるため打ち消す */
.cs-theme #contents a{font-size:inherit; color:inherit;}
/* ↑の inherit が青地CTAバナーの白文字まで暗色化するため、CTA だけ白を再宣言（IDを含めて詳細度で勝つ） */
.cs-theme #contents a.cta{color:#fff;}
/* pagetop ↑（site共通 .pagetop img: fixed bottom:70px right:10px z:10001）を savebar の上へ逃がす */
.cs-theme .pagetop img{bottom:92px;}
@media (max-width:767px){
  /* .footermenu (fixed bottom, <768px・実高67px) と保存バーの重なり回避 */
  .cs-theme .savebar{bottom:67px;}
  .cs-theme .pagetop img{bottom:150px;}
  /* メッセージスレッドはモバイルでも内部スクロール枠（base の max-height:60vh）を維持＝
     PC 同様に ::-webkit-scrollbar が常時表示。枠が動くので message.js の scrollTop も効く
     （旧: SP はページスクロール一本化していたが、スクロールバー可視化のため取りやめ）。 */
  /* 送信パネルが fixed フッターメニュー（実高67px）の裏に潜らないよう下部クリアランス */
  .cs-theme .message-send{margin-bottom:80px;}
}