@charset "UTF-8";

.portfolio-filter-container {

}

.filter-section {
    display: flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content: space-between;
        margin:2rem 0 1rem;
}

.filter-group {
    width: calc(33% - 2rem);
}

.filter-group:last-of-type {
        margin: 2rem 0 0;
}

.filter-group h3 {

    border-bottom: 2px solid rgba(var(--color-rgba-c-color), 1);
    display: inline-block;
    margin: 1rem 0 1rem;
    width: 100%;
}

.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.industry-filter,
.year-filter,
.stage-filter {

    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    padding: .25rem .75rem;
    font-size: .5rem;
    border-radius: 1rem;
    color:rgba(var(--color-rgba-c-color), 1);
    border: 1px solid rgba(var(--color-rgba-c-color), .2);
    background-color:rgba(var(--color-rgba-c-color), .05);

}

.industry-filter:hover,
.year-filter:hover,
.stage-filter:hover {
    background: rgba(var(--color-rgba-2), 1);
    border-color: rgba(var(--color-rgba-c-color), 1);
    transform: translateY(-1px);
}

.industry-filter.active,
.year-filter.active,
.stage-filter.active {
    background: rgba(var(--color-rgba-c-color), 1);
    color: rgba(var(--color-rgba-2), 1);
    border-color: rgba(var(--color-rgba-c-color), 1);

}

.clear-filters {
    background: #6c757d;
    color: rgba(var(--color-rgba-2), 1);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
        padding: .25rem .75rem;
    font-size: .5rem;
    border-radius: 1rem;
}

.clear-filters:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.results-section {
    /* background: rgba(var(--color-rgba-2), 1); */

}

.results-section-detail h2{
    text-align:center;
    position: relative;
}
.results-section-detail h2::before{
    height: 2px;
    width: 2rem;
    background: rgba(var(--color-rgba-c-color), 1);
    content:'';
    position: absolute;
    bottom: -.25rem;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}



.result-count {
    border-bottom: 1px solid #eee;
        margin: 0 0 1rem;
}

.portfolio-grid {

}

.portfolio-list-view{
  display:flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.portfolio-item {
    background: rgba(255,255,255, 1) !important;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
        width: calc(25% - 1rem);
            position: relative;

}

.no-slide.portfolio-list-view .portfolio-item{
    height:auto;
}


.portfolio-item a{
        color: rgba(var(--color-rgba-c-color), 1);
}

section.portfolio-list .portfolio-item a p{
      display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
section.portfolio .portfolio-item a p{
      display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow:ellipsis; 
    padding: 1rem 0 0;
}

section.portfolio .swiper.portfolio-swiper .swiper-slide{
      padding: 1rem .5rem 2rem;
}

.no-slide.portfolio-list-view .portfolio-item a{
    position: relative;
    height:100%;
}
.portfolio-item .flex.column{

}

.portfolio-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--color-rgba-c-color), 1);
}

.portfolio-item.hidden {
    display: none;
}

.company-info {
    width: 100%;
       padding: .5rem;
}


.company-details {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: .5rem 0;
}

.industry,
.year,
.stage,
.fund-type,
.investment-stage {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: .5rem;
    padding: .1rem .6rem;
    border-radius: 1rem;
    border: 1px solid rgba(var(--color-rgba-c-color), .2);
    background-color:rgba(var(--color-rgba-2), 1);
}
.swiper.portfolio-swiper .swiper-slide.category-ce::before {
    content: "サーキュラーエコノミー";
}
.swiper.portfolio-swiper .swiper-slide.category-np::before {
    content: "ネイチャーポジティブ";
}
.swiper.portfolio-swiper .swiper-slide.category-ct::before {
    content: "クライメートテック";
}

/* レスポンシブ対応 */
@media (max-width: 1079px) {

.swiper.portfolio-swiper .swiper-slide{
    padding:0;
}

.portfolio-list-view,
.filter-section{
    display: block;
}
.portfolio-item,
.filter-group{
    width: 100%;
}
.portfolio-item{
    margin:0 0 1rem;
}

.filter-buttons{
    gap:1rem;
}
.clear-filters,
.industry-filter, .year-filter, .stage-filter{
    font-size:.8rem;
}
.company-name{
    font-size:1rem;
}

.filter-group:last-of-type {
        margin: 2rem 0 0;
        text-align:center;
}


section.portfolio .swiper.portfolio-swiper .swiper-slide{
      padding: 1rem .5rem 0;
}

}



/* アニメーション効果の向上 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portfolio-item {
    animation: fadeInUp 0.3s ease-out;
}

/* フォーカス状態のアクセシビリティ向上 */
.industry-filter:focus,
.year-filter:focus,
.stage-filter:focus,
.clear-filters:focus {
    outline: 2px solid rgba(var(--color-rgba-c-color), 1);
    outline-offset: 2px;
}