@charset "UTF-8";

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}


.schools_w{
width:100%;	
	margin: 0 auto;
	padding: 40px 20px;
background:#F6F9F8;
}

    .filter{
      max-width:1000px;margin:0 auto 30px;
    }

    .filter-group{
		margin-bottom:16px
}

.filter-type .filter-label .icon{
  color: var(--green);
}

.filter-area .filter-label .icon{
  color: var(--orange);
}

.filter-field .filter-label .icon{
  color: var(--purple);
}



.filter-label{
      font-size:.85rem;font-weight:700;color:var(--dark);margin-bottom:8px;
      display:flex;align-items:center;gap:6px;
    }

.filter-label .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:currentColor;
  flex-shrink:0;
}

.filter-label .icon svg{
  display:block;
  width:24px;
  height:24px;
}

    .filter-chips{
		display:flex;flex-wrap:wrap;gap:8px
}

  
.chip{
  padding:6px 16px;
  border-radius:50px;
  font-size:.82rem;
  font-weight:600;
  border:2px solid #ddd;
  background:#fff;
  cursor:pointer;
  user-select:none;
	transition: border-color .15s, color .15s, transform .15s;
}


/* 種別 hover */
.filter-type .chip:hover{
  border-color:var(--green);
  color:var(--green);
}

/* エリア hover */
.filter-area .chip:hover{
  border-color:var(--orange);
  color:var(--orange);
}

/* 分野 hover */
.filter-field .chip:hover{
  border-color:var(--purple);
  color:var(--purple);
}

/* active */

.chip.active{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}

.chip.active-orange{
  background:var(--orange);
  color:#fff;
  border-color:var(--orange);
}

.chip.active-purple{
  background:var(--purple);
  color:#fff;
  border-color:var(--purple);
}

/* active時hoverを固定 */

.chip.active:hover,
.chip.active-orange:hover,
.chip.active-purple:hover{
  color:#fff;
}


.search-box{
	width: 100%;
	max-width: 900px;
	margin: 0px auto 20px;
    }

.search-input{
     display: block;
  width: 100%;
  max-width: 100%;
		padding:12px 18px 12px 44px;border:2px solid #ddd;
		border-radius:12px;
      font-size:.95rem;
		outline:none;transition:border-color .2s;
      background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 14px center no-repeat;
    }
    .search-input:focus{
		border-color:#bbb;
  outline:none;
}

    .search-input::placeholder{color:#aaa}

    .school-count{
      max-width:1000px;margin:0 auto 16px;
      font-size:.85rem;color:var(--gray);
    }
    .school-count strong{color:var(--green);font-size:1.1rem}

    .school-grid{
      max-width:1000px;margin:0 auto;
      display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
    }
    .school-card{
      background:#fff;
		border-radius:12px;
		padding:16px;
		box-shadow:0 4px 12px rgba(0,0,0,0.06);
      /*border:1px solid #eee;*/
      transition:all .2s;
		position:relative;
    }
    .school-card:hover{box-shadow:var(--card-shadow);transform:translateY(-2px);border-color:var(--green)}
    .school-name{font-size:.92rem;font-weight:700;margin-bottom:6px;line-height:1.4}
    .school-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
    .tag{
      font-size:.65rem;padding:2px 8px;border-radius:20px;font-weight:600;
    }
    .tag-public{background:#e8f5e9;color:#2e7d32}
    .tag-private{background:#fce4ec;color:#c62828}
    .tag-field{background:#e3f2fd;color:#1565c0}
    .tag-area{background:#fff3e0;color:#e65100}
    .tag-short{background:#f3e5f5;color:#7b1fa2}
    .tag-pro{background:#e0f2f1;color:#00695c}
    .tag-corp{background:#eceff1;color:#37474f}
    .tag-material{background:#fff8e1;color:#f57f17}
    .school-note{font-size:.72rem;color:#999;margin-top:4px;line-height:1.3}

    .no-results{
      text-align:center;padding:40px 20px;color:var(--gray);
      display:none;
    }
    .no-results.show{display:block}

    .loading-message,
    .error-message{
      max-width:1000px;
      margin:0 auto 16px;
      font-size:.9rem;
    }
    .loading-message{color:var(--gray)}
    .error-message{color:#c62828}

    @media(max-width:768px){
      .school-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
      .school-card{padding:12px}
      .school-name{font-size:.82rem}
    }

    @media(max-width:480px){
      .school-grid{grid-template-columns:1fr 1fr;gap:8px}
      .school-card{padding:10px}
      .school-name{font-size:.78rem}
    }



/* PCではセレクトを非表示 */
.filter-selects{
  display:none;
}

/* スマホ */
@media(max-width:768px){
	
.schools_w{
	padding: 25px 15px 15px;
}
	

  /* チップを非表示 */
  .filter-chips{
    display:none;
  }

  /* セレクト表示 */
  .filter-selects{
    display:block;
    margin-bottom:14px;
  }

  .filter-selects select{
  width: 100%;
  padding: 10px 40px 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: .9rem;
  margin-bottom: 8px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
	
/*セレクトボタン*/
	
/* 種別 */

.filter-type select:focus{
  border-color:var(--green);
  outline:none;
}

/* エリア */

.filter-area select:focus{
  border-color:var(--orange);
  outline:none;
}

/* 分野 */

.filter-field select:focus{
  border-color:var(--purple);
  outline:none;
}	

}