@charset "UTF-8"; /* ========================================================= search_top.css — コミュニティ検索ページの Optic スキン対象: _template/{tennis|golf|elseSports}.php/search.html ・全スタイルを .optic-search 配下にスコープ（共通ヘッダー/メニュー/フッターを巻き込まない）・差し色はで切替（community_top.css と同値）・JS 依存ゼロ（チップのトグルもタブも純 CSS）。スクロール演出は不採用。・トークン値は css/sport_top/community_top.css をミラー（将来は共通化候補） ========================================================= */ /* ---------- トークン（ラッパーにスコープ＝グローバル :root を汚さない） ---------- */ .optic-search{ --acc:#d8f24a; /* テニス: optic yellow（差し色） */ --acc-ink:#1f2407; /* acc 上に乗せる文字色 */ --clay:#c1481f; /* terracotta（キッカー・罫線・装飾） */ --clay-soft:#e7c3ad; --bg:#f4f6fb; /* 個人ページ cs_theme と同色＝段差ゼロ */ --surface:#fffdf8; --ink:#1b1712; --muted:#736b5d; --line:#e3daccb0; --line-s:#e9e1d4; /* 見出し: Latin は Bricolage、日本語は Noto Sans JP（Bricolage に日本語グリフが無いため）。 system-ui へ落とさず Noto Sans JP に統一＝ブランド管理下・OS非依存で洗練（design.md 標準）。 */ --disp:"Bricolage Grotesque", "Noto Sans JP", system-ui, sans-serif; --body:"Noto Sans JP", system-ui, sans-serif; --r:16px; --ease:cubic-bezier(.2,.7,.2,1); /* 背景ウォッシュは3スポーツ共通（緑）。スポーツ別の差し色は --acc 側で保持。 */ --hero-grad: radial-gradient(120% 120% at 82% 4%, rgba(91,191,74,.12), transparent 46%); } body.st-golf .optic-search{ --acc:#5bbf4a; --acc-ink:#0e2207; --clay:#b07d2e; --clay-soft:#e7d3ad; } body.st-else .optic-search{ --acc:#7c5cfc; --acc-ink:#ffffff; --clay:#ff5e62; --clay-soft:#f6c6c0; } /* 検索ページでは body のスポーツ背景画像（{sport}_back.jpg・style_search_blog.css が background-attachment:fixed で固定）を消し、Optic の明色背景に統一する。 search_top.css は検索ページでしか読まれないので、トップ等には影響しない。 */ body.st-tennis, body.st-golf, body.st-else{ background-image:none; background-color:#f4f6fb; } /* ---------- ページ土台（全幅＝背景ウォッシュ、内側は中央寄せ） ---------- */ .optic-search{ font-family:var(--body); color:var(--ink); background-color:var(--bg); background-image:var(--hero-grad); line-height:1.7; -webkit-font-smoothing:antialiased; /* PC(≥768px)は header(fixed 50px)+headermenu_pc(fixed 〜60px) が上部を覆うため上余白で逃がす（実測クローム下端 110px ＋余白）。SP(≤767px)は header が通常フローなので下のメディアクエリで上余白を縮める。 */ padding:130px 20px 80px; /* 旧インラインの width:800px / margin 等を打ち消す */ width:auto; margin:0; } .optic-search *{ box-sizing:border-box; } .optic-search img{ display:block; max-width:100%; } .optic-search a{ color:inherit; text-decoration:none; } /* 旧 {sport}/style_top.css がグローバル h1/h2 に font-family:yomogi(手書き体) を !important で強制している（検索結果の h1 が Yomogi になる原因）。 community_top.css と同じ対処で Optic の --disp（Bricolage / 日本語は Noto Sans JP）に戻す。 ※ 結果カードのメッセージ h4 は本文(--body)のままにしたいので h4 は対象外。 */ .optic-search h1, .optic-search h2, .optic-search h3 { font-family: var(--disp) !important; } /* 直下ブロックを中央寄せ（見出しバンド・タブ・本体） */ .optic-search .os-head, .optic-search .search_tab, .optic-search > article, .optic-search > #main{ max-width:920px; margin-inline:auto; } /* ---------- 見出しバンド（kicker + Bricolage 見出し） ---------- */ .optic-search .os-head{ padding:6px 0 2px; } .optic-search .os-kicker{ font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); display:inline-flex; align-items:center; gap:9px; } .optic-search .os-kicker::before{ content:""; width:22px; height:2px; background:var(--clay); display:inline-block; } .optic-search .os-title{ font-family:var(--disp); font-weight:800; font-size:clamp(30px,5vw,50px); line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:12px 0 24px; text-wrap:balance; } .optic-search .os-title em{ font-style:normal; color:var(--clay); } /* ---------- セグメント型タブ（メンバー / コーチ / 生徒） ---------- */ .optic-search .search_tab{ margin:0 auto 26px; display:flex; justify-content:center; } .optic-search .search_tab p{ display:flex; gap:4px; margin:0; padding:5px; background:var(--surface); border:1.5px solid var(--line-s); border-radius:999px; box-shadow:0 10px 26px -22px rgba(27,23,18,.5); max-width:100%; } .optic-search .search_tab p a{ /* 旧 width:33.33% / border-bottom / 配色を打ち消し */ display:inline-flex; align-items:center; justify-content:center; width:auto; padding:11px 22px; border:0; border-radius:999px; font-family:var(--disp); font-weight:700; font-size:14px; white-space:nowrap; color:var(--muted); background:transparent; transition:color .18s var(--ease), background-color .18s var(--ease); } .optic-search .search_tab p a:hover{ color:var(--ink); background:var(--bg); } .optic-search .search_tab p a.active{ color:#fff; background:var(--ink); } .optic-search .search_tab p a:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; } /* ---------- 本体カード（フォーム面） ---------- */ #search.optic-search > article{ background:var(--surface); border:1.5px solid var(--line-s); border-radius:24px; box-shadow:0 34px 64px -46px rgba(27,23,18,.45); padding:34px 38px; border-top:1.5px solid var(--line-s); /* 旧 article{border-top:0} を上書き */ } .optic-search .content, .optic-search .media{ display:block; } /* ---------- フォーム table → ラベル/フィールドの2カラムグリッド ---------- */ .optic-search .ta1, .optic-search .ta1 tbody{ display:block; width:100%; border:0; } .optic-search .ta1 tr{ display:grid; grid-template-columns:190px 1fr; gap:14px 20px; align-items:start; padding:16px 0; border-bottom:1px solid var(--line-s); } .optic-search .ta1 tr:first-child{ padding-top:0; } .optic-search .ta1 tr:last-child{ border-bottom:0; padding-bottom:0; } .optic-search .ta1 th{ font-family:var(--disp); font-weight:700; font-size:14px; color:var(--ink); text-align:left; padding:10px 0 0; background:none; border:0; line-height:1.4; } .optic-search .ta1 td{ display:block; padding:0; border:0; } .optic-search .ta1 td > div{ margin:0; } /* 入力欄（select / textarea / 旧 .input_select .wl を統一） */ .optic-search select, .optic-search textarea, .optic-search .input_select, .optic-search .wl{ width:100%; max-width:none; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--bg); border:1.5px solid var(--line-s); border-radius:12px; padding:11px 14px; line-height:1.5; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); } .optic-search textarea{ resize:vertical; min-height:46px; } .optic-search select:focus, .optic-search textarea:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--clay) 30%, transparent); } /* ---------- タグのチェックボックス → トグルするピル ---------- */ .optic-search .tag{ margin:6px 0 !important; display:flex; flex-wrap:wrap; gap:8px; } /* ネイティブ checkbox を視覚的に隠す（フォーカス・読み上げは維持＝visually-hidden） */ .optic-search input.check{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .optic-search input.check + label.check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin:0; padding:9px 15px; border:1.5px solid var(--line-s); border-radius:999px; background:var(--bg); color:var(--ink); font-size:13.5px; font-weight:700; line-height:1; white-space:nowrap; box-shadow:none; user-select:none; transition:border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); } /* 未選択: 中空のドット */ /* 未選択チップ: マーク無し。旧共通CSSの .check::before が position:absolute のリングを生成して文字に被るため content:none で打ち消す。 */ .optic-search input.check + label.check::before{ content:none; } .optic-search input.check + label.check:hover{ border-color:var(--ink); } /* 選択: 反転＋チェックマーク（色だけに依存しない＝a11y） */ /* 選択チップ: カテゴリ色の淡い塗り＋カテゴリ色の文字/枠（個人ページの属性別色に準拠）。カテゴリ判定は input の name（tag1=種目 / tag2=目的 / tag3=タグ付け / tag4=曜日 / sports=種目）。 ※ tagWhite/Blue/Red は種目と曜日が同色になり不正確なので name で判定する。 */ .optic-search input.check:checked + label.check{ /* フォールバック（name 未該当時） */ background:color-mix(in srgb, var(--acc) 16%, #fff); border-color:var(--acc); color:var(--ink); } .optic-search input[name="tag1[]"]:checked + label.check, .optic-search input[name="sports[]"]:checked + label.check{ background:#fbe2ec; border-color:#e495b6; color:#bf3a6e; } /* 種目 = ピンク */ .optic-search input[name="tag2[]"]:checked + label.check{ background:#e1f3e7; border-color:#97cfaa; color:#2c8650; } /* 利用目的 = グリーン */ .optic-search input[name="tag3[]"]:checked + label.check{ background:#ece4fb; border-color:#bca8ec; color:#674ac9; } /* タグ付け = パープル */ .optic-search input[name="tag4[]"]:checked + label.check{ background:#e4ebf4; border-color:#a4b9d4; color:#3d5c83; } /* 曜日 = ブルーグレー */ /* 選択チェックマーク（文字の左・カテゴリ色） */ .optic-search input.check:checked + label.check::before{ content:"\2713"; position:static; flex:0 0 auto; top:auto; left:auto; margin:0; width:auto; height:auto; border:0; border-radius:0; background:none; color:currentColor; font-size:12px; font-weight:900; line-height:1; } .optic-search input.check:focus-visible + label.check{ outline:2px solid var(--clay); outline-offset:2px; } /* ---------- アクションボタン（検索 / 戻る） ---------- */ .optic-search .form-actions{ margin-top:6px; } .optic-search .form-actions p.c{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:26px 0 0; } .optic-search .form-actions input[type="submit"], .optic-search .form-actions input[type="button"]{ font-family:var(--disp); font-weight:700; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:999px; border:1.5px solid var(--ink); transition:transform .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease); } .optic-search .form-actions input[type="submit"]{ background:var(--ink); color:#fff; } .optic-search .form-actions input[type="submit"]:hover{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); transform:translateY(-2px); } .optic-search .form-actions input[type="button"]{ background:transparent; color:var(--ink); } .optic-search .form-actions input[type="button"]:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); } .optic-search .form-actions input[type="submit"]:focus-visible, .optic-search .form-actions input[type="button"]:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; } /* ========================================================= 検索結果（#show_result） ========================================================= */ #show_result.optic-search > #main{ max-width:1080px; background:transparent; } #show_result.optic-search article{ background:transparent; border:0; box-shadow:none; padding:0; } /* 検索結果の見出し =「Result」をトップの No tennis No life と同じ Bricolage で大きく。 Latin なので --disp 先頭の Bricolage が当たる。.hl に --acc のハイライト帯。 */ #show_result.optic-search h1{ font-family:var(--disp); font-weight:800; letter-spacing:-.03em; line-height:.95; font-size:clamp(40px,6.5vw,74px); color:var(--ink); margin:4px 0 26px; text-wrap:balance; /* 旧基底 h1 のグレー帯 background / 1em padding / box-shadow を打ち消す */ background:none; padding:0; box-shadow:none; text-align:left; } /* 「Result」下のハイライト帯は不要（あやちゃん指示で削除）。span は無効化のみ。 */ #show_result.optic-search h1 .hl{ display:inline; background:none; } /* 結果見出しの帯は本文(#main)幅に合わせて左端を揃える */ #show_result.optic-search .os-head{ max-width:1080px; } /* 隠しフィールド出力用の .none は非表示維持 */ #show_result.optic-search .none{ display:none; } /* 結果カードのグリッド（result-grid を付与した親） */ .optic-search .result-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(236px,1fr)); gap:18px; } /* 1件 = section.list をカード化。旧 {sport}/style_top.css の #main section.list（ID付き・float写真/グラデ/teal吹き出し/三角）を上回るよう #main を含めて上書きし、競合プロパティを明示リセットする。 */ .optic-search #main section.list{ background:var(--surface); border:1.5px solid var(--line-s); border-radius:var(--r); overflow:hidden; margin:0; /* 旧 margin:10px 10% を打ち消す（グリッド幅を守る） */ transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .optic-search #main section.list:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:0 18px 34px -20px rgba(27,23,18,.42); } /* a を縦フレックスにして figure を最上段へ（写真→メッセージ→メタ→タグの画像主導カード） */ .optic-search #main section.list a{ display:flex; flex-direction:column; height:100%; padding:0; overflow:visible; } .optic-search #main section.list a:hover{ background:transparent; } /* フォーカス: 既定の四角アウトライン（角丸を無視してはみ出す）を抑制し、カードの角丸に沿った外側リングに（キーボード時のみ）。 */ .optic-search #main section.list a:focus{ outline:none; } .optic-search #main section.list:has(a:focus-visible){ outline:2px solid var(--clay); outline-offset:2px; } /* フォーカス輪郭のクリップ対策: 結果ビューの section/article がレガシーCSSで overflow:auto を持ち、境界に接するカード（特に先頭カード上端）の outline-offset 分が切れる。visible に上書き（ここに scroll/clip 用途は無い）。 */ #show_result.optic-search, #show_result.optic-search article{ overflow:visible; } /* 並び順（個人ページ準拠）: 写真 → 名前+メタ → メッセージ吹き出し → タグ。名前を写真直下の主役にし、メンバーのひとことは下の吹き出しへ（名前と主従が被らない）。 */ .optic-search #main section.list figure{ order:1; margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--clay-soft); } /* 旧 figure img の float:left / width:20% / min-width:150px / border をリセットして全幅トップ */ .optic-search #main section.list figure img{ float:none; width:100%; min-width:0; height:100%; margin:0; padding:0; border:0; object-fit:cover; transition:transform .4s var(--ease); } .optic-search #main section.list:hover figure img{ transform:scale(1.05); } /* メッセージ h4: 旧 teal バナー＋吹き出し三角(::after)を打ち消す */ .optic-search #main section.list h4{ /* メンバーのひとこと＝名前の下の中立な吹き出し（案D: 薄グレー塗り＋濃いグレー文字）。タグのカテゴリ色と喧嘩しない中立。 */ order:3; position:static; box-shadow:none; border:0; margin:10px 16px 0; padding:8px 12px; border-radius:12px; background:#eceef2; color:#46423c; font-size:12.5px; font-weight:600; line-height:1.55; text-wrap:pretty; } .optic-search #main section.list h4::after{ content:none; display:none; } /* メタ: 旧 margin-left:25%（写真回り込み用インデント）を解除 */ .optic-search #main section.list ul{ order:2; list-style:none; margin:0; padding:10px 16px 0; display:flex; flex-wrap:wrap; gap:4px 12px; } .optic-search #main section.list li{ list-style:none; margin:0; font-size:13px; color:var(--muted); } .optic-search #main section.list li:first-child{ width:100%; display:flex; align-items:center; gap:8px; /* ニックネームはトップ页の .player .nm と同じ Noto Sans JP(--body)。 --disp(Bricolage) だと日本語が system へ落ちてトップと不一致になるため。 */ font-family:var(--body); font-weight:700; font-size:17px; color:var(--ink); } .optic-search #main section.list li:first-child::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--acc); } .optic-search #main section.list p{ margin-left:0; } .optic-search #main section.list .tag{ order:4; margin:0 !important; padding:12px 16px 16px; display:flex; flex-wrap:wrap; gap:6px; } .optic-search #main section.list .tag > div{ font-size:11.5px; font-weight:700; line-height:1; padding:6px 11px; border-radius:999px; background:var(--bg); border:1px solid var(--line-s); color:var(--ink); } /* 結果一覧のタグ＝全カテゴリを単一色（フォレスト緑 #2c8650）に統一。一覧では色を1色に抑え、カテゴリ別の色分け（種目/目的/タグ付け）は個人ページ側だけに残す。 ※特定スポーツだけ別色にしたい場合は、この下に body.st- で上書きする。 */ .optic-search #main section.list .tag .tagWhite, .optic-search #main section.list .tag .tagRed, .optic-search #main section.list .tag .tagBlue{ background:#fff; border-color:#a6d4b6; color:#2c8650; } /* フッター帯（件数・ページング・絞り込み・導線リンク） */ .optic-search .list_foot{ grid-column:1 / -1; text-align:center; margin:0; padding:28px 0 0; color:var(--muted); background:none; border:0; } /* 0件など msg のみの list_foot は空状態として中央に強調 */ #show_result.optic-search .result-grid > .list_foot:first-child{ padding:36px 0 8px; } #show_result.optic-search .result-grid > .list_foot:first-child h4{ font-family:var(--disp); font-weight:800; font-size:18px; color:var(--ink); margin:0; } .optic-search .list_foot span{ font-size:14px; font-variant-numeric:tabular-nums; } .optic-search .list_foot .btn{ font-family:var(--disp); font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin:0 4px; padding:9px 20px; border-radius:999px; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); transition:background-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease); } .optic-search .list_foot .btn:hover{ background:var(--ink); color:#fff; } .optic-search .list_foot .btn:disabled{ opacity:.4; cursor:not-allowed; } .optic-search .list_foot .btn:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; } /* result 内の「さらに絞り込む / 戻る」ボタン */ .optic-search .list_foot input[type="button"]{ font-family:var(--disp); font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; margin:4px; padding:11px 22px; border-radius:999px; border:1.5px solid var(--ink); background:transparent; color:var(--ink); transition:background-color .18s var(--ease), color .18s var(--ease); } .optic-search #but_search, .optic-search #but_search_learn, .optic-search #but_search_teach{ background:var(--ink); color:#fff; } .optic-search .list_foot input[type="button"]:hover{ background:var(--ink); color:#fff; } .optic-search #but_search:hover, .optic-search #but_search_learn:hover, .optic-search #but_search_teach:hover{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); } .optic-search .list_foot input[type="button"]:focus-visible{ outline:2px solid var(--clay); outline-offset:2px; } /* 他カテゴリ検索への導線リンク */ .optic-search .list_foot a{ font-family:var(--disp); font-weight:700; font-size:13.5px; color:var(--clay); border-bottom:1.5px solid var(--clay); padding-bottom:2px; margin:0 8px; transition:opacity .18s var(--ease); } .optic-search .list_foot a:hover{ opacity:.65; } .optic-search .list_foot a:focus-visible{ outline:2px solid var(--clay); outline-offset:3px; } .optic-search .list_foot .mt15{ margin:16px 0; } /* 「準備中」(wait) */ .optic-search#top h1{ font-family:var(--disp); font-weight:800; font-size:clamp(26px,4vw,40px); text-align:center; color:var(--ink); padding:40px 0; } /* ---------- レスポンシブ ---------- */ /* SP: header が position:relative（通常フロー）に変わる 768px 未満。固定クロームが無いので上余白を縮める（ヘッダー直下に自然配置）。 */ @media (max-width:767px){ .optic-search{ padding:30px 14px 64px; } #search.optic-search > article{ padding:24px 18px; border-radius:18px; } .optic-search .ta1 tr{ grid-template-columns:1fr; gap:8px; padding:14px 0; } .optic-search .ta1 th{ padding:0; } /* モバイルはセレクト/入力をコンパクトに（空のコンボボックスが大きく見えるのを抑える） */ .optic-search select, .optic-search textarea, .optic-search .input_select, .optic-search .wl{ padding:8px 12px; font-size:14px; border-radius:10px; } .optic-search textarea, .optic-search .wl{ min-height:38px; } /* モバイルの結果カード写真は小さめ＋枠に隙間（インセット・角丸）。縦長を緩和。比率16:10は維持し、幅を抑えて中央寄せ（高さは比率連動で縮む＝情報量を確保）。 */ .optic-search #main section.list figure{ align-self:center; width:100%; max-width:240px; margin:12px auto 0; border-radius:12px; aspect-ratio:16/10; } .optic-search .search_tab p{ width:100%; } .optic-search .search_tab p a{ flex:1 1 0; padding:11px 6px; font-size:12.5px; } .optic-search .os-title{ margin-bottom:18px; } .optic-search .result-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } /* タブレットは2列 */ } @media (max-width:430px){ .optic-search .search_tab p a{ font-size:11.5px; padding:11px 4px; } .optic-search .result-grid{ grid-template-columns:1fr; } /* スマホは1列（細長すぎ解消） */ /* === スマホ(1列)の結果カード = A案レイアウト === 名前トップ → [写真小・左 / メタ右] → メッセージ → タグ。 ul を display:contents で分解し、li を grid アイテムとして配置（テンプレ非改修）。写真は16:10維持の小サイズで左列、メタ3行ぶんを縦に span。 */ .optic-search #main section.list a{ display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:start; padding:13px 16px 16px; } .optic-search #main section.list ul{ display:contents; } /* 名前（li:first-child）＝最上段・全幅 */ .optic-search #main section.list li:first-child{ grid-column:1 / -1; grid-row:1; margin:0 0 10px; padding:0; } /* 写真＝左列、メタ3行を縦 span。16:10維持の小サイズ */ .optic-search #main section.list figure{ grid-column:1; grid-row:2 / span 3; align-self:start; width:128px; max-width:none; margin:0; border-radius:11px; aspect-ratio:16/10; } /* メタ（li 2〜4）＝右列に縦並び */ .optic-search #main section.list li:nth-child(2){ grid-column:2; grid-row:2; padding:0; } .optic-search #main section.list li:nth-child(3){ grid-column:2; grid-row:3; padding:0; } .optic-search #main section.list li:nth-child(4){ grid-column:2; grid-row:4; padding:0; } /* メッセージ＝全幅・写真の下 */ .optic-search #main section.list h4{ grid-column:1 / -1; grid-row:5; margin:12px 0 0; } /* タグ＝全幅・最下段 */ .optic-search #main section.list .tag{ grid-column:1 / -1; grid-row:6; padding:12px 0 0; } } /* ---------- モーション低減設定の尊重 ---------- */ @media (prefers-reduced-motion: reduce){ .optic-search *, .optic-search *::before, .optic-search *::after{ transition:none !important; animation:none !important; } .optic-search section.list:hover{ transform:none; } .optic-search section.list:hover figure img{ transform:none; } .optic-search .form-actions input[type="submit"]:hover, .optic-search .form-actions input[type="button"]:hover{ transform:none; } }