@charset "utf-8";
/* CSS Document */


        .column-fv {
            background-image: url("../images/staff_column/column-page-fv-pc.webp");
            background-size: cover;
            background-position: center;
            height: 350px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
		
		@media screen and (max-width: 736px){
            .column-fv{
                background-image: url("../images/staff_column/column-page-fv-sp.webp");
				height: 270px;
            }
        }		
		
        .column-fv::before {
            content: '';
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .column-fv-en {
            font-family: 'Inter', sans-serif;
            font-size: 4rem;
            font-weight: 800;
            color: #fff;
            line-height: 1;
            letter-spacing: 0.05em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            position: relative;
            z-index: 10;
        }
		
		@media screen and (max-width: 736px){
            .column-fv-en {
                font-size: 3rem;
				line-height: 0.7;
            }
        }	
        .column-fv-jp {
            font-size: 1.25rem;
            font-weight: 400;
            color: #fff;
            margin-top: 0.5rem;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            position: relative;
            z-index: 10;
			text-align: center;
        }

		@media screen and (max-width: 736px){
            .column-fv-jp {
                font-size: 1rem;
				margin-top: 1rem;
            }
        }	

		
      /* コラムグリッド */
        .column-card {
            background: #fff;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            display: none; /* JSで制御 */
            opacity: 0;
            transform: translateY(30px);
        }
        .column-card.is-visible { display: block; }
        .column-card.animate { opacity: 1; transform: translateY(0); }
        .column-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

        .column-thumb {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
            width: 100%;
            aspect-ratio: 6 /4;
            overflow: hidden;
            position: relative;
        }
        .column-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .column-card:hover .column-thumb img { transform: scale(1.08); }

        .column-tag {
            position: relative;
			display: inline-block;
			z-index: 20;
            top: 1rem;
            left: 1rem;
            background: #b19a38;
            color: #fff;
            padding: 0.3rem 0.8rem;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            border-radius: 2px;
        }
		
		.tag-wrap{
			position: absolute;
		}

        .column-info { padding: 1.5rem; display: flex; flex-direction: column;}
        .column-author {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        .author-img { width: 44px; height: 44px; border-radius: 50%; background: #f3f4f6; overflow: hidden; }
        .author-img img { width: 100%; height: 100%; object-fit: cover; }
        .author-name { font-size: 0.85rem; font-weight: 700; color: #333; }
        .author-pos { font-size: 0.7rem; color: #999; }

        .column-title {
            font-size: 1.2rem;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 1rem;
            color: #433f37;
        }
        .column-excerpt {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.7;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
		

		.column-date-bottom {
    		text-align: right;    
    		font-size: 0.8rem;     
    		color: #999;           
    		margin-top: 1rem;       
    		font-family: 'Inter', sans-serif;
    		font-weight: 500;
		}
		
		@media (max-width: 768px) {
		#filter-tabs{
			justify-content: flex-start!important;
		}}
		
		



        /* もっと見るボタン */
        .load-more-btn {
            background-color: #fff;
            color: #b19a38;
            border: 1px solid #b19a38;
            font-weight: 700;
            padding: 1.25rem 5rem;
            border-radius: 4px;
            transition: all 0.3s;
            cursor: pointer;
        }
        .load-more-btn:hover { background-color: #b19a38; color: #fff; }
        .load-more-btn.hidden { display: none; }

        /* タブのアクティブスタイル */
        .filter-tab.active {
            color: #b19a38;
            border-bottom: 2px solid #b19a38;
        }