@charset "UTF-8"; /* ========================================================================== 検索 -------------------------------------------------------------------------- 対象は4か所。 1. トップページの常設検索（.lg-topsearch） 2. 検索結果ページの本文カラム（再検索フォーム・件数・0件表示） 3. SPヘッダーの検索パネル（#search-menu-content） 4. 検索語のハイライト（mark）サイドバーの検索窓は sidebar.css が担当する。現行の問題・見出しが「"リール"」だけで、検索結果のページだと分からない・style.css に main#main .search-box{display:none} があり、 Cocoon が出している再検索フォームが消されていた → キーワードを変えるにはブラウザバックか、サイドバーまで戻るしかない・0件のとき「NOT FOUND／投稿が見つかりませんでした。」だけの行き止まり ========================================================================== */ /* -------------------------------------------------------------------------- 1. トップページの常設検索ヘッダーの虫めがねは SP にしか無く、PC では検索がサイドバーまでスクロールしないと見つからなかった。トップの上部に出しっぱなしにする。帯は罫線で区切らない。薄い紫を白へ溶かして本文へつなぐことで、「ページの一部」として読ませる（区切ると広告の枠に見えて読み飛ばされる）。色は既存トークンの流用なので、複製サイトでも自動で色が変わる。 -------------------------------------------------------------------------- */ .lg-topsearch{ background: linear-gradient(180deg, var(--c-brand-tint) 0%, var(--c-brand-pale) 55%, var(--c-bg) 100%); } /* Cocoon は tmp/body-top を #container の「外」（直下）で出力する。固定ヘッダーぶんの余白は header.css で #container に持たせているため、このままだと帯がヘッダーの下に潜る。帯自身に余白を持たせ、そのぶん #container 側は打ち消す（.home #container は 1id+1class で #container より強い）。 SPは Cocoon が別の固定ヘッダーを使い #container の余白が 0 なので、この付け替えは PC 幅だけでよい。 */ @media screen and (min-width: 1024px){ .lg-topsearch{ margin-top: var(--h-header); } .home #container{ padding-top: 0; } } .lg-topsearch__in{ width: min(100% - 32px, var(--w-wrap)); margin: 0 auto; padding: 34px 0 30px; } /* 入力欄は全幅に伸ばさない。1180px幅いっぱいの検索窓は何文字入れればいいのか見当がつかない。 */ .lg-topsearch .search-box{ max-width: 640px; margin-inline: auto; } .lg-topsearch__hint{ max-width: 640px; margin: 12px auto 0; font-size: 12px; color: var(--c-ink-4); text-align: center; } /* -------------------------------------------------------------------------- 2. 検索結果ページの見出しブロック -------------------------------------------------------------------------- */ .lg-searchhead{ margin: 0 0 28px; } /* パンくず。検索結果ページには Cocoon のパンくずが出ないので自前で置く */ .lg-crumb{ margin: 0 0 14px; font-size: 12.5px; color: var(--c-ink-3); } .lg-crumb ol{ display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; } .lg-crumb li{ display: flex; align-items: center; gap: 0 8px; } .lg-crumb li + li::before{ content: "／"; color: var(--c-ink-4); } /* 当たり判定を24px以上に（WCAG 2.5.8 の目安）。記事側のパンくずと揃える */ .lg-crumb a{ display: inline-block; padding: 3px 0; color: var(--c-ink-3); text-decoration: none; } .lg-crumb a:hover{ color: var(--c-brand); text-decoration: underline; } .lg-crumb [aria-current]{ color: var(--c-ink-2); } .lg-searchhead__title{ margin: 0 0 18px; font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--c-ink); } .lg-searchhead__title em{ font-style: normal; color: var(--c-brand-deep); } /* -------------------------------------------------------------------------- 再検索フォーム Cocoon が tmp/list-title.php で出している .search-box をそのまま使う。（style.css の main#main .search-box{display:none} は削除した） -------------------------------------------------------------------------- */ #main .search-box, .lg-topsearch .search-box{ display: flex; align-items: center; gap: 12px; width: 100%; /* 左右は auto。トップの帯では 640px 幅で中央に置きたいので、ここで 0 にすると下の margin-inline:auto を打ち消してしまう。 */ margin: 0 auto 10px; padding: 6px 6px 6px 20px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-bg); transition: border-color .15s; } #main .search-box:focus-within, .lg-topsearch .search-box:focus-within{ border-color: var(--c-brand); outline: 4px solid var(--c-brand-tint); outline-offset: 0; } #main .search-edit, .lg-topsearch .search-edit{ flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 17px; color: var(--c-ink); } #main .search-edit:focus, .lg-topsearch .search-edit:focus{ outline: 0; } #main .search-edit::placeholder, .lg-topsearch .search-edit::placeholder{ color: var(--c-ink-4); } /* Cocoon は .search-submit を position:absolute; top:18px; right:3px で入力欄の上に乗せている。こちらは flex の並びに参加させたいので静的に戻す。戻さないと、ボタンが 10px 下にずれ、入力した文字がボタンの下へ潜り込む。 */ #main .search-submit, .lg-topsearch .search-submit, #sidebar .search-submit, #search-menu-content .search-submit{ position: static; top: auto; right: auto; } #main .search-submit, .lg-topsearch .search-submit{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--c-brand); color: var(--c-on-dark); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .15s; } #main .search-submit:hover, .lg-topsearch .search-submit:hover{ background: var(--c-brand-dark); } /* Cocoon は虫眼鏡アイコン（FontAwesome）だけを入れている。 PCでは「検索」の文字を足したいので ::after で補う。 */ #main .search-submit::after, .lg-topsearch .search-submit::after{ content: "検索"; margin-left: 6px; font-size: 14px; } /* -------------------------------------------------------------------------- 件数 -------------------------------------------------------------------------- */ .lg-resultmeta{ margin: 0 0 24px; font-size: 14px; color: var(--c-ink-3); } .lg-resultmeta strong{ color: var(--c-ink); font-size: 16px; } /* -------------------------------------------------------------------------- 検索語のハイライトタイトルと抜粋の中で、一致した文字列を黄色マーカーで示す。本文中のマーカー（blocks.css）と同じ引き方にして、「これは検索の当たり」だと一目で分かるようにする。 -------------------------------------------------------------------------- */ #list mark{ padding: 0 1px; background: linear-gradient(transparent 62%, var(--c-marker) 62%); color: inherit; font-weight: 700; } /* -------------------------------------------------------------------------- 0件のとき「見つかりませんでした」で終わらせず、次の一手を必ず並べる。 -------------------------------------------------------------------------- */ .lg-empty{ padding: 32px 28px; border: 1px dashed var(--c-line-strong); border-radius: var(--radius-lg); } /* h2 なので、Cocoon の .article h2（紫ベタ塗り）や見出し既定に引っ張られないよう、この場の値を明示する */ h2.lg-empty__title{ margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--c-ink); } h2.lg-empty__title em{ font-style: normal; color: var(--c-brand-deep); } .lg-empty__lead{ margin: 0; font-size: 14px; line-height: 1.85; color: var(--c-ink-3); } .lg-empty__block{ margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-line); } .lg-empty__label{ margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--c-ink-3); } .lg-empty__hints{ margin: 0; padding-left: 1.3em; font-size: 14px; line-height: 1.9; color: var(--c-ink-2); } /* よく検索されるキーワード */ .lg-keywords{ display: flex; flex-wrap: wrap; gap: 8px; } .lg-keywords a{ display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-bg); font-size: 12px; color: var(--c-ink-2); text-decoration: none; } .lg-keywords a::before{ content: "#"; margin-right: 3px; color: var(--c-ink-4); } .lg-keywords a:hover{ border-color: var(--c-brand); background: var(--c-brand-pale); color: var(--c-brand-dark); } /* 0件のときはカテゴリーチップの外枠（余白・区切り線）を外して中身だけ使う */ .lg-empty .lg-filter{ margin: 0; padding: 0; border: 0; } /* -------------------------------------------------------------------------- SPヘッダーの検索パネル（#search-menu-content） style.css から移設。サイドバー・本文の検索窓と同じ pill 型に揃える。 -------------------------------------------------------------------------- */ #search-menu-content .search-box{ display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 5px 5px 5px 16px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-bg); /* 影はパネル側（header.css の #search-menu-content）が持つ。ここにも付けると二重になる。代わりに枠線で境界を出す（パネルの地も白なので、影も枠も無いと入力欄が消えて見える）。 */ } #search-menu-content .search-edit{ flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 16px; /* 16px 未満だと iOS Safari が入力時に自動ズームする */ color: var(--c-ink); } #search-menu-content .search-box:focus-within{ border-color: var(--c-brand); outline: 4px solid var(--c-brand-tint); outline-offset: 0; } #search-menu-content .search-edit:focus{ outline: 0; } #search-menu-content .search-edit::placeholder{ color: var(--c-ink-4); } #search-menu-content .search-submit{ flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--c-brand); color: var(--c-on-dark); cursor: pointer; } #search-menu-content .search-submit:hover{ background: var(--c-brand-dark); } /* -------------------------------------------------------------------------- SP -------------------------------------------------------------------------- */ @media screen and (max-width: 834px){ .lg-searchhead{ margin-bottom: 22px; } .lg-searchhead__title{ font-size: 21px; margin-bottom: 14px; } #main .search-box, .lg-topsearch .search-box{ gap: 8px; padding: 5px 5px 5px 16px; } #main .search-edit, .lg-topsearch .search-edit{ height: 40px; font-size: 16px; } /* 画面が狭いのでボタンは虫眼鏡だけに戻す */ #main .search-submit, .lg-topsearch .search-submit{ width: 40px; height: 40px; padding: 0; } #main .search-submit::after, .lg-topsearch .search-submit::after{ content: none; } .lg-resultmeta{ margin-bottom: 18px; font-size: 13px; } .lg-resultmeta strong{ font-size: 15px; } .lg-empty{ padding: 24px 18px; } }