/* ==========================================================
   メインビジュアル内 検索フォーム (.still__box の中)
   デザイン見本 a5fa470d... に合わせた配色
   ========================================================== */

/* テーマ既定の見出しは使わない（.topSearch__title に置き換えたため） */
.still__content .heading-slider { display: none; }

.still.still .still__content {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* 見出し「副業サーチ検索」— 青緑・丸ゴシック体 */
.topSearch__title {
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.25;
  margin: 0 0 22px;
  color: #0099BA;
  text-align: center;
}

.topSearch {
  width: 100%;
  /* 下層ページの l-main 内幅（758px - padding 30px*2）に合わせる */
  max-width: 698px;
  margin: 0 auto;
  padding: 30px 30px 36px;
  background: rgba(255, 255, 255, .86);
  border: none;
  border-radius: 18px;
  text-align: center;
  box-sizing: border-box;
}
.topSearch__inner {
  width: 78%;
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}
/* 見本にラベル文言が無いので、画面には出さず読み上げ用にだけ残す */
.topSearch__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.topSearch__input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background: #fff;
  border: 1px solid #656464;
  border-radius: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.topSearch__input::placeholder { color: #9b9b9b; }
.topSearch__input:focus {
  outline: none;
  border-color: #0099BA;
  box-shadow: 0 0 0 3px rgba(0, 153, 186, .25);
}
.topSearch__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  height: 54px;
  margin: 22px auto 0;
  padding: 0 28px;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #FC3D8B;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 0 #A70428;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, background .15s;
}
.topSearch__submit:hover { background: #FB2A80; }
/* 押し込む動き */
.topSearch__submit:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #A70428;
}

/* メインビジュアルは固定高(テーマがインラインCSSで .still{height:290px} を出力)。
   フォームがはみ出すので、詳細度を上げて可変高にする。 */
.still.still,
.still.still .still__box { height: auto; }
/* パネルの上下に余白を入れ、背景イラストが見えるようにする。
   アーカイブページではヒーローが .l-headerBottom の外に出るため、
   祖先に依存せず .still.still で詳細度を確保する。 */
.still.still .still__box { padding: 46px 20px; }
.still.still { min-height: 290px; }
@media only screen and (min-width: 768px) {
  .still.still { min-height: 360px; }
}

/* 検索結果ページ（メインビジュアル外に置くとき） */
.l-main .topSearch {
  margin: 0 auto 32px;
  background: #F2FBFF;
}

/* search.php の0件メッセージ */
.topSearch__empty {
  margin: 0 0 24px;
  padding: 24px 20px;
  text-align: center;
  background: #fffaf0;
  border: 1px solid #f0e0c0;
  border-radius: 6px;
}
.topSearch__emptyTitle { margin: 0 0 8px; font-size: 1.8rem; font-weight: 700; }
.topSearch__emptyText  { margin: 0; font-size: 1.4rem; line-height: 1.7; }


/* ==========================================================
   検索結果ブロック（.wider と .wider dividerBottom の間）
   ========================================================== */
.searchBlock[hidden] { display: none !important; }
.searchBlock {
  width: 100%;
  padding: 32px 20px;
  background: #98DD4C;
}
.searchBlock__inner {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.topSearchResults {
  width: 100%;
  margin: 0;
  text-align: left;
}
/* フォーム直下に差し込むフォールバック時（検索結果ページなど）だけ区切り線を出す */
.topSearch .topSearchResults,
.topSearch__form + .topSearchResults {
  width: 78%;
  max-width: 760px;
  margin: 24px auto 0;
  padding-top: 22px;
  border-top: 1px solid #e2e2e2;
}

.topSearchResults__loading {
  margin: 0;
  padding: 12px 0;
  font-size: 15px;
  color: #666;
  text-align: center;
}
.topSearchResults__count {
  margin: 0 0 14px;
  font-size: 14px;
  color: #666;
}
.topSearchResults__count strong { font-size: 17px; color: #111; }

/* --- 2列カードグリッド --- */
.topSearchResults__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;  /* 行をまたいでカードの高さを揃える */
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.topSearchResults__item { margin: 0; min-width: 0; }

.topSearchResults__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #222 !important;
  text-decoration: none !important;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.topSearchResults__link:hover {
  border-color: #bbb;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
}

.topSearchResults__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eee;
}
.topSearchResults__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.topSearchResults__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px 14px;
}
.topSearchResults__cat {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #69b53d;
  border-radius: 3px;
}
/* テーマ側の span 指定に負けるため詳細度を上げる */
.topSearchResults .topSearchResults__link .topSearchResults__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  /* 3行を超えたら省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-height: calc(1.5em * 3);
}

.topSearchResults__more { margin: 22px 0 0; text-align: center; }
.topSearchResults__moreLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  height: 54px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 700;
  color: #111 !important;
  text-decoration: none !important;
  background: #fff;
  border: 2px solid #111;
  border-radius: 5px;
}
.topSearchResults__moreLink:hover { color: #fff !important; background: #111; }

.topSearchResults__none {
  padding: 18px 16px;
  text-align: center;
  background: #EFEFEF;
  border: 1px solid #D5D5D5;
  border-radius: 6px;
}
.topSearchResults__noneTitle { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.topSearchResults__noneText  { margin: 0; font-size: 13px; line-height: 1.7; color: #555; }


/* ==========================================================
   スマートフォン
   ========================================================== */
@media screen and (max-width: 767px) {
  .topSearch { padding: 24px 16px 28px; }
  .topSearch__inner { width: 100%; }
  .topSearch__label { font-size: 16px; margin-bottom: 12px; }
  .topSearch__input { height: 56px; font-size: 16px; }
  .topSearch__submit { width: 100%; min-width: 0; height: 56px; }

  .still.still .still__box { padding: 26px 14px; }
  .searchBlock { padding: 22px 14px; }
  .topSearch .topSearchResults,
  .topSearch__form + .topSearchResults { width: 100%; margin-top: 18px; padding-top: 18px; }

  /* スマホでも2列を維持する */
  .topSearchResults__list { gap: 12px; }
  .topSearchResults__body { padding: 10px 10px 12px; }
  .topSearchResults__cat { font-size: 10px; padding: 1px 6px; margin-bottom: 4px; }
  .topSearchResults .topSearchResults__link .topSearchResults__title { font-size: 12.5px; }
  .topSearchResults__moreLink { width: 100%; min-width: 0; height: 50px; font-size: 14px; }
}

/* サムネイルが無い記事のプレースホルダ */
.topSearchResults__thumb-none {
  background: #ececec url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / 40px no-repeat;
}

/* ==========================================================
   検索結果ページ（全幅グリーンブロック構成）
   ========================================================== */
/* フォームを置く帯。ヒーローが無いので上下に余白を取る */
.searchFormBlock {
  width: 100%;
  padding: 40px 20px;
  background: #fff;
}
/* 結果ブロックはトップの #kidelaSearchBlock と同じ見た目。常に表示する */
.searchBlock-page { display: block; }

.topSearchResults-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 0;
  border-top: none;
}
/* ページャをブロック内で中央に置く */
.searchBlock-page .pager,
.searchBlock-page .pagination {
  margin-top: 24px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .searchFormBlock { padding: 24px 14px; }
}

/* ==========================================================
   スマホ：ヒーローの縦横比を画像に固定し、パネルを可変にする
   ----------------------------------------------------------
   従来はヒーローの高さがパネルの高さで決まっていたため、
   端末幅ごとに枠の比率が 0.89〜1.39 までばらつき、
   画像(比率1.27)との差分が切り取られていた。
   枠を画像と同じ比率に固定し、パネル側を vw で伸縮させて収める。
   ========================================================== */
@media only screen and (max-width: 767px) {

  /* 枠を SP 画像(768x606)と同じ比率に固定 */
  .still.still {
    aspect-ratio: 768 / 606;
    height: auto;
    min-height: 0;
  }
  .still.still .still__box {
    height: 100%;
    /* 既定は中央揃え。上寄せにしてパネルを上に出す */
    align-items: flex-start;
    /* 上寄せのまま、上パディングでパネルの位置を下げる */
    padding: clamp(20px, 5vw, 44px) 14px clamp(6px, 2.2vw, 20px);
  }

  /* パネルを画面幅に応じて伸縮させる。横幅は画面の85%に固定 */
  .topSearch {
    width: 90vw;
    max-width: 90vw;
    padding: clamp(20px, 7vw, 40px) clamp(12px, 4vw, 22px) clamp(22px, 7.5vw, 44px);
  }
  .topSearch__title {
    font-size: clamp(18px, 6vw, 28px);
    margin: 0 0 clamp(14px, 5vw, 26px);
  }
  .topSearch__input {
    height: clamp(40px, 12vw, 52px);
    /* iOS で入力時に拡大されるのを防ぐため 16px は下回らせない */
    font-size: 16px;
  }
  .topSearch__submit {
    width: 55%;
    min-width: 0;
    height: clamp(38px, 11vw, 48px);
    /* 幅を詰めた分、左右パディングも縮めないと文字が折り返す */
    padding: 0 10px;
    margin: clamp(18px, 6vw, 28px) auto 0;
    font-size: clamp(12px, 3.4vw, 15px);
    white-space: nowrap;
  }
}