body{
    background-color: #efefef;
}
.fv{
    .container{
        margin-left: auto;
        margin-right: auto;
        position: relative;
        padding-top: clamp(120px,14vw,140px);
        padding-bottom: clamp(20px,4vw,40px);
        background: linear-gradient(135deg, rgb(255, 0, 191), rgb(144, 245, 154), rgba(4, 202, 255, 1));
        background-size: 200% 200%;
        animation: gradient-move 8s ease infinite;
    }
    .title-area{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        padding-left:clamp(20px,3vw,30px);
        padding-right:clamp(20px,3vw,30px);
        .title{
            font-size: clamp(20px,3vw,30px);
            font-family: "Noto Sans JP", sans-serif;
            color: var(--base-white-color);
            letter-spacing: clamp(4px,1vw,10px);
            line-height: 1.8;
            font-weight: 900;
        }
        .text-gray-layer-02 {
            color: rgba(255, 255, 255, 0.3);
        }
        .text-gray-layer-02::after {
            color: var(--base-white-color);
        }
        .text-gray-layer {
            transition: clip-path 1.4s cubic-bezier(0.43, 0.05, 0.17, 1);
        }
        .text-gray-layer::after {
            transition: clip-path 1.4s cubic-bezier(0.43, 0.05, 0.17, 1);
            transition-delay: 0.8s;
        }
    }
}
@keyframes gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.wp-contents-area{
    .container{
        max-width: var(--container-size) ;
        margin-right: auto;
        margin-left: auto;
        padding: clamp(10px,2vw,20px) var(--container-padding-left-right);
    }
    .flex-items{
        display: flex;
        flex-direction: column;
        gap: clamp(20px,4vw,40px);
    }
    .article-lists {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: clamp(20px, 4vw, 40px);
        margin: 0 auto;
        padding: 0;
        list-style: none;
        }

        .article-list {
        flex: 0 0 350px;
        display: flex;
        }
        @media screen and (max-width: 480px) {
        .article-list {
            flex: 0 0 100%;
        }

        .article-card {
            max-height: none; /* 必要に応じて高さ制限解除 */
        }

        .article-thumbnail img {
            height: auto; /* 画像比率を保って縮小 */
        }
        }

        .article-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        max-height: 500px; /* 任意で統一した高さ */
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        text-decoration: none;
        }

        .article-card:hover {
        transform: translateY(-4px);
        }

        .article-thumbnail img {
        width: 100%;
        height: 200px; /* アイキャッチ高さ固定 */
        object-fit: cover;
        }

        .article-content {
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 1;
        }

        .article-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        color: #888;
        margin-bottom: 8px;
        }

        .article-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: #333;
        line-height: 1.5;
        margin: 0 0 12px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 3.6em;
        }

        .article-more {
        font-size: 0.9rem;
        color: #0073aa;
        font-weight: bold;
        margin-top: auto;
        }
        .category-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 1em;
        padding: 0;
        list-style: none;
        }

        .category-nav-list .nav-list {
        background: #fff;
        border: 2px solid #ddd;
        border-radius: 30px;
        padding: 0.4em 1.2em;
        font-size: 0.9rem;
        font-weight: 600;
        transition: all 0.3s ease;
        }

        .category-nav-list .nav-list a {
        text-decoration: none;
        color: #333;
        display: block;
        }

        .category-nav-list .nav-list:hover {
        background: #0073aa;
        border-color: #0073aa;
        }

        .category-nav-list .nav-list:hover a {
        color: #fff;
        }

        .category-nav-list .nav-list.active {
        background: #0073aa;
        border-color: #0073aa;
        }

        .category-nav-list .nav-list.active a {
        color: #fff;
        }
}