:root {
  --key-blue: #0077b1;
  --key-grn:#008f72;
  --key-pink:#ee3b5d;
  --key-navy: #00195f;
  --bg-light: #f6f8fa;
  --bg-light-blue:#d9edf5;
  --max-width: 1280px;
  --xxl-font:48px;
  --xxl-font-jp:42px;
  --s-font:21px;
  --s-font:16px;
}

.search-lead{display:flex; justify-content: center; width:100%; text-align: center; font-size:16px; color:var(--key-navy); font-weight:600; margin-bottom:30px;}

.search__tags {
  width:100%;
  max-width:1180px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin:0 auto 24px;
  margin-bottom: 24px;
}

.tag {
  padding: 8px 16px;
  border-radius: 20px;
  border: 2px solid #333;
  background: #fff;
  color: #333;
  cursor: pointer;
  font-size:15px;
  font-weight:600;
  width:calc((100% - 8px * 7) / 8);
  min-width:130px;
}

.tag.is-active {
  background: var(--key-blue);
  border: 2px solid var(--key-blue);
  color: #fff;
}

.search__controls {
  display:flex;
  width:100%;
  max-width: 1180px;
  margin: auto;
  gap: 20px;
  align-items: center;
}

.search__controls .search__input{width:calc((100% - 20px * 2) / 3); background:#f4fafc;}
.search__controls select,
.search__controls button{width:calc((100% - 20px * 2) / 3); height:42px; padding:10px; border:solid 1px var(--key-blue); border-radius:4px; background:#fff; text-align:center; font-size:16px;}
.search__controls .search__input input{width:100%; height:42px; padding:0 10px; border:solid 1px var(--key-blue); border-radius:4px; font-size:15px;}
.search__controls .search__input input[type=text]{position:relative; padding-left:36px; background:url(../images/common/search.png)no-repeat; background-size: 18px 18px; background-position:10px 10px;}

.search__caption{ padding:20px 0 20px 15px; font-size:13px; position:relative;}
.search__caption:before{content:""; width:10px; height:14px; display:block; position:absolute; background:url(../images/common/favorite_icon_on.svg) no-repeat; background-size: 10px 14px; left:0; top:calc(50% - 7px);}

.search-more{width:50%; border-radius:0 0 20px 20px; padding:15px 30px 30px; min-width:500px; display:flex; justify-content: center; flex-direction: column;}
.search-more .btn__block{margin-top:20px;}
.search-more .result__num{color:var(--key-blue); font-weight:700; display:flex; justify-content: center; font-size:var(--m-font); gap:10px; align-items: end;}
.search-more .result__num span{font-size:var(--s-font);}

.models-list{display:flex; flex-wrap:wrap; gap:16px;margin: 0 auto;}
.models-list .model-card{width:calc((100% - 16px * 5) / 6); position: relative; transition: .25s ease;}
.models-list article .number{position:absolute; left:10px; bottom:44px; font-size:14px; color:#fff;}
.model-card img {
  width: 100%;
  border-radius: 8px;
}
.model-card p{
  font-size:15px; font-weight:500;
}

.model-name {
  margin-top: 8px;
  font-size: 14px;
  text-align: center;
}

/* お気に入りボタン */
.fav-btn {
  position: absolute;
  bottom: 40px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255,255,255,.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .2s;
}

.fav-btn.is-active {
  animation: pop .25s ease;
}

@keyframes pop {
  0% { transform: scale(0.8); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* SVG共通 */
.bookmark-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--key-grn);
  stroke-width: 2;
  transition: 0.2s;
}

/* ON状態 */
.fav-btn.is-active .bookmark-icon {
  fill: var(--key-grn);
  stroke: var(--key-grn);
}


/*-----絞り込み検索モーダル----*/

.filter-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}

.filter-modal.is-open {
  display: block;
}

.filter-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}

.filter-modal__content {
  position: relative;
  width: 800px;
  max-width: 90%;
  background: #fff;
  margin: 10% auto;
  padding: 30px;
  border-radius: 20px;
}

.filter-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 40px;
  cursor: pointer;
}

.filter-modal h2{text-align: center; font-size:20px; margin-bottom:20px; font-weight:700;}

.filter-modal .filter-list{background:var(--bg-light-blue); padding:16px; font-size:16px; margin-bottom:25px;}
.filter-modal .filter-list p{font-size:14px;}
.filter-modal .filter-list ul{display:flex; flex-wrap: wrap;}
.filter-modal .filter-list ul li{padding:2px 20px 2px 0; position:relative; font-weight:700; font-size:16px;}
.filter-modal .filter-list ul li:after{content:"|"; position: absolute; display: block; top:0; right:10px;}

.filter-group{display:flex; gap:20px; padding:0 10px 12px 10px;}
.filter-label{font-weight:bold; text-wrap: wrap; width:8em;}
.filter-group .item-list{display:flex; flex-wrap: wrap; gap:20px; row-gap: 0; font-size:14px; width:calc(100% - 8em - 20px)}
.filter-group .item-list label{width:fit-content}
.filter-group .item-list select{padding:10px; border:solid 1px var(--key-blue); border-radius: 6px; width:140px;}

.modal-caption{font-size:12px; padding:20px 0;}

.filter-actions{display:flex; align-items: center; justify-content: center;}
.filter-actions button{width:400px; margin:0 auto; height:48px; border:solid 2px var(--key-blue); color:var(--key-blue); font-size:18px; padding:15px 30px; line-height:1; border-radius:24px; background:#fff; font-weight:700;}


/* ラベル全体 */
.custom-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
}

/* ネイティブ非表示 */
.custom-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 見た目ボックス */
.check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--key-blue);
  border-radius: 4px;
  transition: .2s ease;
  position: relative;
}

/* チェックON */
.custom-check input:checked + .check-box {
  background: var(--key-blue);
  border-color: var(--key-blue);
}

/* チェックアイコン */
.custom-check input:checked + .check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: -2px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.search-intro{display:flex; width:1000px; max-width:90%; margin:40px auto;}