/* =====================================================================
   /search/ ページ専用 — MarsFlag デフォルトCSSの上書き

   目的:
   - MarsFlag が出力する DOM (mf-* クラス) は書き換えられないため、
     CSS だけで /search/our-moments/index.php の見た目に近づける
   - 既存サイト変数 (--Primary_blue / --Bg_gray / --Secondary_yellow /
     --Text_black) を流用してサイト全体と統一感を保つ

   詳細度設計:
   - MarsFlag のデフォルトCSSは
       .mf-search-results .mf-search-results_body .mf-search-results_body_result ...
     のようにチェーンが深く (0,3,0)〜(0,6,0) ある
   - 本ファイルでは MarsFlag のチェーンと "同じ長さ" のセレクタで書く
     → 同詳細度でカスケード順 (後勝ち) を使って打ち消す
   - MarsFlag が !important を使う宣言 (例: doc-type_select の border-radius) は
     本ファイルでも !important を使う

   読込順:
   - mf-custom.css は MarsFlag SDK が <head> 末尾に動的注入する <style> よりも
     "後" に読み込む必要がある。/search/index.php 内の <script> で
     customElements.whenDefined() 解決後に <link> を appendChild している。

   構成:
     0. 検索バー表示 / 検索バーの見た目を index_bk.php に揃える
     1. 検索結果   (mf-search-results)
        1-1. スペルチェック提案
        1-2. ヘッダー (件数表示)
        1-3. 結果リスト
        1-4. ハイライト
        1-5. MarsFlag ロゴ
     2. AI 回答    (mf-emotech-response)
     3. ページネーション (mf-pagination)

   ※ doc-type <select> は CSS で非表示にし、JS (mf-doctype-radio.js) で
     サイト共通の form-check --radio UI に置き換える。
   ===================================================================== */


/* ===================================================================
   0. 検索バー — index_bk.php の .main-search__form と同じピル状デザイン
   ピル状の見た目・入力欄・ボタン・SDK既定UI非表示などの共通スタイルは
   common.css の mf-search-box {...} (source: import/components/_mf-search.scss)
   に一元化済み。ここでは /search/ 固有の寸法・アイコンサイズ・固有UIのみ扱う。
   =================================================================== */

/* バー寸法: 中央寄せ max-width:736px / 高さ56px / 左右パディング28px */
#main .mf-search-box .mf-search-bar {
  max-width: 736px;
  height: 56px;
  padding: 0 28px;
}

/* ラジオフィルター (mf-doctype-radio.js で生成) を検索バーと同じ幅・中央寄せに
   揃える。index.css の `.main-search-filter` は max-width: 720px だが、
   検索バーと左端を一致させるため 736px に上書き */
#main .main-search-filter[data-mf-doctype-radio] {
  max-width: 736px;
  margin-left: auto;
  margin-right: auto;
}

/* 検索ボタンのアイコンサイズ (色・margin は共通定義側) */
#main .mf-search-box .mf-search-bar .mf-search-bar_button .mf-search-bar_button_icon {
  width: 18px;
  height: 18px;
}

/* SP / タブレット */
@media screen and (max-width: 1080px) {
  #main .mf-search-box .mf-search-bar {
    height: 52px;
    padding: 0 20px;
  }
  #main .mf-search-box .mf-search-bar .mf-search-bar_input {
    height: 40px !important;
  }
  /* OFF（コメントアウト）
  #main .mf-search-box .mf-search-bar .mf-search-bar_button .mf-search-bar_button_icon {
    width: 28px;
    height: 28px;
  }
  */
}

/* ===================================================================
   1. 検索結果 (mf-search-results)
   =================================================================== */

/* --- 1-1. スペルチェック提案 ----------------------------------------- */
/* MF (0,2,0): .mf-search-results .mf-search-results_spellcheck { margin:20px 0 10px; font-size:14px } */
.mf-search-results .mf-search-results_spellcheck {
  margin: 16px 0 0;
  font-size: 1.5rem;
  color: var(--Text_black, #2E313B);
}

.mf-search-results .mf-search-results_spellcheck .mf-search-results_spellcheck_text {
  margin: 0;
}

/* MF (0,4,0): color:var(--accent-color); font-weight:700 */
.mf-search-results .mf-search-results_spellcheck .mf-search-results_spellcheck_text .mf-search-results_spellcheck_text_link {
  color: var(--Primary_blue, #3036E6);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--Primary_blue, #3036E6);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.6s ease, color 0.6s ease;
}

.mf-search-results .mf-search-results_spellcheck .mf-search-results_spellcheck_text .mf-search-results_spellcheck_text_link:hover {
  text-decoration-color: transparent;
}


/* --- 1-2. ヘッダー (件数表示) --------------------------------------- */
/* index_bk.php の .search-results-summary を踏襲:
     - flex space-between で左右配置
     - bg-gray 背景, padding 10/19, t-size-14
   mf-header-split.js が <p> 内を <span data-mf-header-left/right> の 2 つに分割するので、
   その 2 つの span が flex item として左右端に並ぶ */
.mf-search-results .mf-search-results_header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 10px 19px;
  background: var(--Bg_gray, #F5F5F5);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--Text_black, #2E313B);
}

/* 左ブロック: 「キーワード」の検索結果 */
.mf-search-results .mf-search-results_header [data-mf-header-left] {
  display: inline;
}

/* 右ブロック: 308 件中 1 - 10 件を表示 */
.mf-search-results .mf-search-results_header [data-mf-header-right] {
  display: inline;
  white-space: nowrap;
}

/* キーワード <strong>: index_bk.php の <strong class="t-size-16"> 相当 (16px / bold) */
.mf-search-results .mf-search-results_header .mf-search-results_header_search-query {
  font-size: 1.6rem;
  font-weight: 700;
}

/* 件数の数字 <strong>: index_bk.php の右 <p> は <strong> なしの素のテキストなので、
   MF が当てる font-weight: 700 を打消して 14px / normal にする。
   MF (0,3,0) と同詳細度で、本ファイルが後勝ち */
.mf-search-results .mf-search-results_header .mf-search-results_header_results-count,
.mf-search-results .mf-search-results_header .mf-search-results_header_results-start,
.mf-search-results .mf-search-results_header .mf-search-results_header_results-end {
  font-size: 1.4rem;
  font-weight: 400;
}


/* --- 1-3. 結果リスト ------------------------------------------------- */
/* MF (0,2,0): list-style:none; padding:0 */
.mf-search-results .mf-search-results_body {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* MF (0,3,0): display:flex; align-items:start; width:100%; padding:10px 0
   our-moments の grid col-2-15-85 / tb-col-2-30-70 を再現
   position: relative はタイトルリンクの ::after (Stretched Link) の起点 */
.mf-search-results .mf-search-results_body .mf-search-results_body_result {
  position: relative;
  display: grid;
  grid-template-columns: minmax(108px, 15%) 1fr;
  align-items: start;
  gap: 16px;
  width: 100%;
  padding: 20px 20px 32px;
  border-top: 1px solid rgba(46, 49, 59, 0.15);
  color: var(--Text_black, #2E313B);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Stretched Link: タイトル <a> の ::after で <li> 全体を覆い、
   どこをクリックしてもタイトル <a> の href に飛ぶようにする。
   画像 <a> / URL <a> は同じ href なので動作差はない */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_title .mf-search-results_body_result_texts_title_link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mf-search-results .mf-search-results_body .mf-search-results_body_result:last-child {
  border-bottom: 1px solid rgba(46, 49, 59, 0.15);
}

.mf-search-results .mf-search-results_body .mf-search-results_body_result:hover {
  background-color: var(--Bg_gray, #F5F5F5);
}

/* 画像リンク: MF (0,4,0) flex-shrink:0; margin-right:15px; width:max-content */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_image {
  display: block;
  align-self: start;
  margin-right: 0;
  width: auto;
  line-height: 0;
}

/* 画像本体: MF (0,4,1) object-fit:contain; min-width:175px; border; border-radius:4px; width:auto */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_image img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  max-width: none;
  border: none;
  border-radius: 0;
  object-fit: contain;
}

/* MF (0,2,0): .mf-search-results .mf_imgsize-{1,2,3} { max-width: 175/200/225px }
   グリッド列に合わせて伸縮させるため max-width を解除する */
.mf-search-results .mf_imgsize-1,
.mf-search-results .mf_imgsize-2,
.mf-search-results .mf_imgsize-3 {
  max-width: none;
  width: 100%;
  height: auto;
}

/* MF (0,4,1) hover: filter:brightness(.95) — 残してよい */

/* テキストブロック: MF (0,4,0) display:flex; flex-direction:column; align-items:start; flex-grow:1 */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  flex-grow: 1;
}

/* タイトル <h3>: MF (0,5,0) margin:0; font-size:16px; line-height:1.3 */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

/* タイトル内 <a>: MF (0,6,0) color:var(--accent-color); text-decoration:none; font-weight:700;
   overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; line-clamp:1
   → 1 行省略を解除して通常表示にする */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_title .mf-search-results_body_result_texts_title_link {
  color: var(--Primary_blue, #3036E6);
  text-decoration: none;
  font-weight: 700;
  display: inline;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  -webkit-box-orient: initial;
}

.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_title .mf-search-results_body_result_texts_title_link:hover {
  text-decoration: none;
}

.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_title .mf-search-results_body_result_texts_title_link:visited {
  color: var(--Primary_blue, #3036E6);
}

/* 説明文: MF (0,5,0) font-size:14px; margin:0 0 6px; line-height:1.3; -webkit-line-clamp:3 */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_description {
  margin: 4px 0 0;
  font-size: 1.5rem;
  line-height: 1.7;
  color: var(--Text_black, #2E313B);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* URL リンク: MF (0,5,0) display:flex; align-items:baseline; line-height:1.5; gap:4px; text-decoration:none; color:#222 */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_url {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 8px;
  color: var(--Primary_blue, #3036E6);
  text-decoration: underline;
  text-decoration-color: var(--Primary_blue, #3036E6);
  text-underline-offset: 2px;
  line-height: 1.5;
  transition: text-decoration-color 0.6s ease;
}

.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_url:visited {
  color: var(--Primary_blue, #3036E6);
}

/* 行全体のホバーで下線をフェード */
.mf-search-results .mf-search-results_body .mf-search-results_body_result:hover .mf-search-results_body_result_texts_url {
  text-decoration-color: transparent;
}

/* URL テキスト: MF (0,6,0) font-size:13px; -webkit-line-clamp:1; word-break:break-all */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_url .mf-search-results_body_result_texts_url_text {
  font-size: 1.4rem;
  color: inherit;
  cursor: pointer;
  word-break: break-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* MF (0,7,0) :hover { text-decoration: underline } を打ち消す (親で制御) */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_url .mf-search-results_body_result_texts_url_text:hover {
  text-decoration: none;
}

/* メタ情報: 空の場合は表示しない */
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_meta {
  margin-top: 0;
}
.mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_texts .mf-search-results_body_result_texts_meta:empty {
  display: none;
}

/* タブレット以下: 2 カラム比率 30:70 に切替え */
@media screen and (max-width: 1080px) {
  .mf-search-results .mf-search-results_body .mf-search-results_body_result {
    grid-template-columns: minmax(108px, 30%) 1fr;
    padding: 16px 20px 24px;
  }
}

/* SP (MF が 576px で flex-direction:column にする等を当ててくるので、
   その分も上書きする) */
@media (max-width: 576px) {
  .mf-search-results .mf-search-results_body .mf-search-results_body_result {
    display: grid;
    grid-template-columns: minmax(108px, 30%) 1fr;
    flex-direction: row;
    align-items: start;
    gap: 16px;
    margin-bottom: 0;
  }
  .mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_image {
    margin-right: 0;
  }
  .mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_image img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  /* MF (0,2,0 @media): .mf_imgsize-{1,2,3} { width:60-92vw !important; height:auto !important } */
  .mf-search-results .mf_imgsize-1,
  .mf-search-results .mf_imgsize-2,
  .mf-search-results .mf_imgsize-3 {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
  }
}


/* --- 1-3-α. サムネイル非表示バリアント -------------------------------
   <main id="main" class="mf-no-thumbnail"> が付いたページ (例: /search/) で
   画像列を消し、テキストのみの 1 カラム表示にする。
   /search/our-moments/ には付けないので、そちらは画像あり 2 カラムのまま */

/* 2 カラム grid → 1 カラム block。padding と border-top は base 継承 */
#main.mf-no-thumbnail .mf-search-results .mf-search-results_body .mf-search-results_body_result {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* 画像リンク自体を非表示 */
#main.mf-no-thumbnail .mf-search-results .mf-search-results_body .mf-search-results_body_result .mf-search-results_body_result_image {
  display: none;
}


/* --- 1-4. ハイライト ------------------------------------------------- */
/* MF (0,2,0): background:linear-gradient(animation); background-size:200%; border-radius:4px; padding:0 1px
   → サイト共通色 (--Secondary_yellow) のソリッド背景に置き換える */
.mf-search-results .mf-highlighted-text {
  background: var(--Secondary_yellow, #D6FFB6);
  background-size: auto;
  background-position: 0 0;
  border-radius: 0;
  padding: 0 1px;
  color: inherit;
  animation: none;
}


/* --- 1-5. MarsFlag ロゴ --------------------------------------------- */
/* MF (0,1,0): display:flex; width:100%; justify-content:center; margin-top:50px */
.mf-search-results .mf-search-results_mars-logo {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 32px;
  opacity: 0.5;
}

/* MF (0,2,1): img { width:270px; height:auto } */
.mf-search-results .mf-search-results_mars-logo .mf-search-results_mars-logo_link img {
  width: auto;
  height: 16px;
}


/* ===================================================================
   2. AI 回答 (mf-emotech-response)
   /search/index_bk.php に対応物はないので独自に bg-gray カード化
   =================================================================== */
.mf-emotech-response {
  margin: 32px 0 0;
  padding: 24px;
  background: var(--Bg_gray, #F5F5F5);
  border-radius: 8px;
}

.mf-emotech-response .mf-emotech-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.mf-emotech-response .mf-emotech-logo {
  height: 20px;
  width: auto;
}

.mf-emotech-response .mf-emotech-title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--Text_black, #2E313B);
}

.mf-emotech-response .mf-emotech-content,
.mf-emotech-response .mf-emotech-content .mf-markdown-body {
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--Text_black, #2E313B);
}

.mf-emotech-response .mf-emotech-sources {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(46, 49, 59, 0.15);
}

.mf-emotech-response .mf-emotech-sources .mf-emotech-sources-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: transparent;
  border: none;
  color: var(--Primary_blue, #3036E6);
  font-size: 1.4rem;
  cursor: pointer;
}

.mf-emotech-response .mf-emotech-sources .mf-emotech-sources-header:hover {
  text-decoration: underline;
}

.mf-emotech-response .mf-emotech-references-title,
.mf-emotech-response .mf-emotech-related-docs-title {
  margin: 12px 0 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--Text_black, #2E313B);
}

.mf-emotech-response .mf-emotech-references-list,
.mf-emotech-response .mf-emotech-related-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mf-emotech-response .mf-emotech-reference-link,
.mf-emotech-response .mf-emotech-related-doc-link {
  display: inline-block;
  padding: 2px 0;
  font-size: 1.4rem;
  color: var(--Primary_blue, #3036E6);
  text-decoration: underline;
  text-decoration-color: var(--Primary_blue, #3036E6);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.6s ease;
}

.mf-emotech-response .mf-emotech-reference-link:hover,
.mf-emotech-response .mf-emotech-related-doc-link:hover {
  text-decoration-color: transparent;
}

.mf-emotech-response .mf-emotech-footer {
  margin-top: 12px;
}

.mf-emotech-response .mf-emotech-warning-text {
  margin: 0;
  font-size: 1.2rem;
  color: rgba(46, 49, 59, 0.6);
}


/* ===================================================================
   3. ページネーション (mf-pagination)
   /common/inc/component/_pagination.php と同じデザインに揃える:
     - 数字ボタン: min 32px, 背景・枠なし, Text_sub_black,
                 hover/active で Primary_blue + ::after 下線
     - 矢印ボタン: Primary_blue, SVG 24-32px, hover で translateX
     - disabled: Devider_gray, pointer-events: none
   MF の DOM は <button> なので、attribute セレクタで
   「ページ N に移動」(数字) と「最初/前/次/最後のページに移動」(矢印) を判別
   =================================================================== */

/* ラッパー <mf-pagination> 自体 */
.mf-search-results mf-pagination,
mf-pagination {
  display: block;
  width: 100%;
}

/* リスト本体: 中央寄せ flex, gap 8px (project の .pagination-list と同じ) */
.mf-search-results .mf-pagination,
mf-pagination .mf-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  /* gap: 8px; */
  width: 100%;
  margin: 32px 0 0;
  padding: 0;
}

/* 全ボタン共通: 枠なし・背景なし・border-radius なし (project の .pagination-link 準拠) */
.mf-search-results .mf-pagination .mf-pagination_button,
mf-pagination .mf-pagination .mf-pagination_button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--Text_sub_black, #64687A);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 150%;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.6s ease, transform 0.6s ease;
}

/* 数字ボタン (aria-label="ページ N に移動") の ::after 下線 */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label^="ページ"]::after,
mf-pagination .mf-pagination .mf-pagination_button[aria-label^="ページ"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--Primary_blue, #3036E6);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* 数字ボタン hover: Primary_blue + 下線表示 (active/disabled は除外) */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label^="ページ"]:not(.active-page):not(:disabled):hover,
mf-pagination .mf-pagination .mf-pagination_button[aria-label^="ページ"]:not(.active-page):not(:disabled):hover {
  color: var(--Primary_blue, #3036E6);
  background: transparent;
}

.mf-search-results .mf-pagination .mf-pagination_button[aria-label^="ページ"]:not(.active-page):not(:disabled):hover::after,
mf-pagination .mf-pagination .mf-pagination_button[aria-label^="ページ"]:not(.active-page):not(:disabled):hover::after {
  opacity: 1;
}

/* 現在ページ (.active-page or [aria-current="page"]):
   Primary_blue + 常時下線 + クリック無効 */
.mf-search-results .mf-pagination .mf-pagination_button.active-page,
mf-pagination .mf-pagination .mf-pagination_button.active-page,
.mf-search-results .mf-pagination .mf-pagination_button[aria-current="page"],
mf-pagination .mf-pagination .mf-pagination_button[aria-current="page"] {
  background: transparent;
  color: var(--Primary_blue, #3036E6);
  border: none;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
}

.mf-search-results .mf-pagination .mf-pagination_button.active-page::after,
mf-pagination .mf-pagination .mf-pagination_button.active-page::after,
.mf-search-results .mf-pagination .mf-pagination_button[aria-current="page"]::after,
mf-pagination .mf-pagination .mf-pagination_button[aria-current="page"]::after {
  opacity: 1 !important;
}

/* 矢印ボタン (前/次): Primary_blue, hover で translateX
   project の _pagination.php には「最初/最後」のページボタンが無いため、
   MarsFlag が出力する <<最初 / 最後>> ボタンは非表示にする */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="最初のページ"],
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="最初のページ"],
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="最後のページ"],
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="最後のページ"] {
  display: none;
}

.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="前のページ"],
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="前のページ"],
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="次のページ"],
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="次のページ"] {
  color: var(--Primary_blue, #3036E6);
}

/* project: .pagination-link.is-prev { margin-right: 8px } と同じ */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="前のページ"],
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="前のページ"] {
  margin-right: 8px;
}

/* project: .pagination-link.is-next { margin-left: 8px } と同じ */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="次のページ"],
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="次のページ"] {
  margin-left: 8px;
}

/* 「前」(左方向) hover */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="前のページ"]:not(:disabled):hover,
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="前のページ"]:not(:disabled):hover {
  transform: translateX(-4px);
}

/* 「次」(右方向) hover */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="次のページ"]:not(:disabled):hover,
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="次のページ"]:not(:disabled):hover {
  transform: translateX(4px);
}

/* 矢印 SVG: 24px (SP) / 32px (PC)。
   stroke を使う project SVG に合わせて fill: none, stroke は currentColor
   (実際の SVG 中身は mf-pagination-pad.js で project の chevron + 横線に置換) */
.mf-search-results .mf-pagination .mf-pagination_button .mf-pagination_button_icon,
mf-pagination .mf-pagination .mf-pagination_button .mf-pagination_button_icon {
  width: 24px;
  height: 24px;
  display: block;
  fill: none;
  stroke: currentColor;
  transition: transform 0.6s ease;
}

@media screen and (min-width: 768px) {
  .mf-search-results .mf-pagination .mf-pagination_button .mf-pagination_button_icon,
  mf-pagination .mf-pagination .mf-pagination_button .mf-pagination_button_icon {
    width: 32px;
    height: 32px;
  }
}

/* 「前のページ」アイコンは project の右向き SVG を 180° 回転して左向きに
   (project .pagination-link.is-prev svg { transform: rotate(180deg) } と同等) */
.mf-search-results .mf-pagination .mf-pagination_button[aria-label*="前のページ"] .mf-pagination_button_icon,
mf-pagination .mf-pagination .mf-pagination_button[aria-label*="前のページ"] .mf-pagination_button_icon {
  transform: rotate(180deg);
}

/* 無効 (disabled) — 矢印ボタンは Devider_gray、共通で pointer-events 無効 */
.mf-search-results .mf-pagination .mf-pagination_button:disabled,
mf-pagination .mf-pagination .mf-pagination_button:disabled {
  pointer-events: none;
  cursor: default;
  color: var(--Devider_gray, #D1D3DE);
  opacity: 1;
  background: transparent;
}

/* 省略記号 (mf-pagination-firstlast.js が挿入)
   ページボタンと同じサイズで縦中央揃え、装飾なし */
.mf-search-results .mf-pagination .mf-pagination_ellipsis,
mf-pagination .mf-pagination .mf-pagination_ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--Text_sub_black, #64687A);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 150%;
  user-select: none;
  pointer-events: none;
}

/* mf-pagination-firstlast.js が「自前番号ボタン」と差し替えるため、
   MF オリジナル番号ボタンを個別に非表示にするクラス */
.mf-search-results .mf-pagination .mf-pagination_button.mf-pagination_hidden,
mf-pagination .mf-pagination .mf-pagination_button.mf-pagination_hidden {
  display: none !important;
}
