/* made.html 専用のスタイル */

/* 1. ページ全体の基本設定 */
.made-page {
    background: #FFFFFF !important;
    padding-top: 0;
}

.made-hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2.note_profile.png */
.hero-image-wrapper {
    width: 100%;
    background-color: #2D3A1B;
    line-height: 0;
}

.hero-full-img {
    width: 100%;
    height: auto;
    display: block;
    max-width: none; 
}

/* 3.コンテンツ */
.made-board-body {
    background: white;
    width: 100%;
    padding: 60px 80px 100px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

.made-section {
    max-width: 1000px; 
    margin: 0 auto;
}

/* 4. タイトル部分（# My Design.） */
.title-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 80px;
}

.title-marker {
    width: 110%;
    height: auto;
    position: absolute;
    bottom: -5px;
    left: -5%;
    z-index: 1;
}

.title-text {
    /*height: 32px;*/
    width: auto;
    position: relative;
    z-index: 2;
    display: block;
}

/* 5. 作品グリッドレイアウト */
.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 60px 40px; 
    justify-items: center;
}

.work-item {
    width: 100%;
    max-width: 300px;
	 scroll-margin-top: 120px;
}

.work-item a {
    display: block;
    text-decoration: none;
}

.work-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 6. ★HOMEボタン */
.back-home {
    text-align: right; 
    margin-top: 80px;   
}

.back-home img {
    /*height: 50px;*/      
    width: auto;
    transition: opacity 0.3s ease;
}

.back-home a:hover img {
    opacity: 0.7;
}

/* 7. スマホ対応 */
@media (max-width: 768px) {
    .made-board-body {
        padding: 40px 20px;
    }
    .works-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px 20px;
    }
    .title-wrapper {
        margin-bottom: 40px;
    }
    .back-home {
        margin-top: 40px;
    }
    .back-home img {
        height: 40px;    
    }
}

/* 【第2段階】480px以下 */
@media (max-width: 480px) {
    .made-board-body {
        padding: 40px 20px;
    }
    .works-grid {
        grid-template-columns: 1fr; 
        gap: 30px 0;
    }
    .work-item {
        max-width: 100%; 
    }
    .title-text {
        height: 24px;
    }
    .back-home img {
        height: 35px;
    }
}





/*     js      */
/* 5. 作品グリッドレイアウト */

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 60px 40px; 
    justify-items: center;
}

.work-item {
    width: 100%;
    max-width: 300px;
}

/* ★アニメーションの基本設定 */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


.fade-in-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

/* ★【PC用：3列】左から右へ順番にディレイをかける */
/* 1列目 (1, 4, 7枚目...) */
.work-item.fade-in-up:nth-child(3n+1) { transition-delay: 0s; }
/* 2列目 (2, 5, 8枚目...) */
.work-item.fade-in-up:nth-child(3n+2) { transition-delay: 0.2s; }
/* 3列目 (3, 6, 9枚目...) */
.work-item.fade-in-up:nth-child(3n+3) { transition-delay: 0.4s; }


/* 7. レスポンシブ対応 */

/* 【第1段階】タブレット・スマホ（768px以下） */
@media (max-width: 768px) {
    .works-grid {
        grid-template-columns: repeat(2, 1fr); 
    }

    
    .work-item.fade-in-up:nth-child(n) { transition-delay: 0s !important; } /* 一旦リセット */
    .work-item.fade-in-up:nth-child(2n+1) { transition-delay: 0s !important; }   /* 左列 */
    .work-item.fade-in-up:nth-child(2n+2) { transition-delay: 0.2s !important; } /* 右列 */
}

/* 【第2段階】小さなスマホ（480px以下） */
@media (max-width: 480px) {
    .works-grid {
        grid-template-columns: 1fr; 
    }
   
    .work-item.fade-in-up {
        transition-delay: 0s !important;
    }
}