@charset "UTF-8";
/* ==========================================================================
   検索結果ページ・ページネーション
   --------------------------------------------------------------------------
   Figma 4:17（PC）/ 4:150（SP）
   マークアップは inc/renewal.php（見出し：tmp/list-title、1件：tmp/entry-card）。
   ========================================================================== */

/* 本文カラムの幅（Figma は 940px を中央寄せ） */
.search .lsm-searchhead,
.search #list,
.search .pagination{
  max-width:     940px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   再検索フォーム ＋ 件数
   -------------------------------------------------------------------------- */
.lsm-searchhead{
  padding-top: 20px;
}
.lsm-searchhead .search-box{
  max-width:     642px;
  margin-inline: auto;
}
.lsm-searchhead .search-edit{
  height:    61px;
  padding:   0 27px 0 56px;
  font-size: 16px;
}
.lsm-searchhead .search-submit{ left: 27px; }

.lsm-searchhead .lsm-searchhead__title{
  margin:      40px 0 34px !important;   /* common.css の h1 指定（!important）を打ち消す */
  color:       var(--c-ink);
  font-size:   16px;
  font-weight: 700;
  line-height: 1.5;
  text-align:  center;
}

/* --------------------------------------------------------------------------
   結果の1件
   -------------------------------------------------------------------------- */
.lsm-result{
  position:        relative;
  display:         block;
  padding:         20px 60px 20px 20px;
  border-top:      1px solid var(--c-line);
  color:           var(--c-ink);
  text-decoration: none;
  transition:      background-color .3s ease;
}
/* Cocoon の .list は行間に row-gap: 1em を入れている。
   その隙間には hover の地が塗られず白い帯になるので、区切り線どうしを詰める */
.search #list{
  row-gap: 0;
}
.search #list .lsm-result:last-child{
  border-bottom: 1px solid var(--c-line);
}
.lsm-result::after{
  content:   "";
  position:  absolute;
  top:       50%;
  right:     21px;
  width:     12px;
  height:    12px;
  transform: translateY(-50%);
  background-color: var(--c-ink);
  -webkit-mask: var(--icon-right) no-repeat center / contain;
          mask: var(--icon-right) no-repeat center / contain;
  transition: right .3s ease, background-color .3s ease;
}

.lsm-result__in{
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            4px;
}
.lsm-result__title{
  margin:      0;
  padding:     0;
  border:      0;
  background:  none;
  color:       var(--c-ink);
  font-size:   16px;
  font-weight: 700;
  line-height: 22px;
  transition:  color .3s ease;
}

/* PC は1行で省略 */
.lsm-result__snippet{
  width:         100%;
  margin:        0;
  overflow:      hidden;
  color:         var(--c-ink);
  font-size:     14px;
  line-height:   1.5;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* 検索語のハイライト */
.lsm-result mark{
  padding:    0;
  background: var(--c-marker);
  color:      inherit;
}

/* 0件 */
.lsm-empty{
  padding:    40px 20px;
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.lsm-empty__title{
  margin:      0 0 8px;
  font-size:   16px;
  font-weight: 700;
}
.lsm-empty__lead{
  margin:    0;
  color:     var(--c-ink-3);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   ページネーション（トップ・カテゴリー・検索結果で共通）
   形は common.css にある。色だけ Figma に合わせる。
   -------------------------------------------------------------------------- */
.pagination .page-numbers{
  border-color: var(--c-line);
  color:        var(--c-ink);
}
.pagination .page-numbers.current{
  background:   var(--c-brand-pale);
  border-color: var(--c-brand);
  color:        var(--c-brand);
  font-weight:  700;
}
.pagination a.page-numbers{
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.pagination .page-numbers.dots{
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   hover（参考：lgram.jp/manual。考え方は top.css の hover と同じ）
   -------------------------------------------------------------------------- */
@media (hover: hover){
  /* color は Cocoon の a:hover（赤文字）を打ち消すため */
  .lsm-result:hover{
    background: var(--c-hover);
    color:      var(--c-ink);
  }
  .lsm-result:hover .lsm-result__title{ color: var(--c-brand); }
  .lsm-result:hover::after{
    right: 16px;
    background-color: var(--c-brand);
  }

  /* 数字は青で塗りつぶす。前後の矢印は枠が無いので色だけ変える */
  .pagination a.page-numbers:hover{
    border-color: var(--c-brand);
    background:   var(--c-brand);
    color:        var(--c-on-dark);
  }
  .pagination a.page-numbers.prev:hover,
  .pagination a.page-numbers.next:hover{
    border-color: transparent;
    background:   transparent;
    color:        var(--c-brand);
  }
}

/* --------------------------------------------------------------------------
   SP（Figma 4:150）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px){
  .lsm-searchhead{ padding-top: 0; }
  .lsm-searchhead .search-box{ max-width: none; }
  .lsm-searchhead .search-edit{
    height:  43px;
    padding: 0 16px 0 42px;
  }
  .lsm-searchhead .search-submit{ left: 13px; }

  .lsm-searchhead .lsm-searchhead__title{
    margin:     34px 0 15px !important;
    font-size:  14px;
    text-align: left;
  }

  /* 区切り線は画面の端から端まで
     （本文カラムの左右20px ＋ common.css の .content の margin 4px を打ち消す） */
  .search #list{ margin-inline: -24px; }

  .lsm-result{ padding: 15px 50px 15px 20px; }
  .lsm-result::after{ right: 20px; }

  /* SP は2行で省略 */
  .lsm-result__snippet{
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space:        normal;
    line-height:        21px;
  }
}