/* 1. 親コンテナ：画像の高さに自動で合わせる */
.mv {
    position: relative;
    width: 100%;
    line-height: 0; /* 下部の微細な隙間を排除 */
}

/* 2. 背景画像：横幅100%で縦は自動（絶対に切れない） */
.mv picture img {
    width: 100%;
    height: auto;
    display: block;
}

/* 3. テキストの共通設定：画像の上に重なるレイヤー */
.mv_text1, .mv_text2, .mv_text3, .mv_text4 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 左右中央揃え */
    z-index: 10;
    opacity: 1; /* 最初は隠す */
    width: 80%; /* 必要に応じてテキスト画像のサイズを調整 */
}
.mv_text1,.mv_text2 {
    opacity: 0;
}

/* 各テキストの上下位置（画像内のどのあたりに置くか調整してください） */
.mv_text1 { top: 5%; width: 30%; }
.mv_text2 { top: 13%; width: 30%; }
.mv_text3 { top: 28%; width: 30%; }
.mv_text4 { top: 55%; width: 60%; }

/* 4. フェードインアニメーション */
@keyframes mvFade {
    from {
        opacity: 0;
        transform: translate(-50%, 10px); /* 少し下から浮く */
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* 自動でフェードインする1〜3 */
.mv_text1 { animation: mvFade 1.0s forwards 1.5s; }
.mv_text2 { animation: mvFade 2.0s forwards 1.2s; }
/* .mv_text3 { animation: mvFade 1.0s forwards 1.9s; } */

/* 5. スクロールで表示させる4の設定 */
/* JSで .is-show クラスを付与する場合 */
.mv_text2.is-show,
.mv_text3.is-show,
.mv_text4.is-show {
    animation: mvFade 1.5s forwards 0s;
}


.p-concept {
    padding: 80px 0;
}
.item01 {
    margin-bottom: 60px;
}
.item02 {
    margin-bottom: 120px;
}
.item03 {
    margin-bottom: 60px;
}


@media screen and (max-width: 810px) {
    .title-area {
        margin-bottom: 0;
    }
    .mv_text1 { top: 5%; width: 50%; }
    .mv_text2 { top: 15%; width: 60%; }
    .mv_text3 { top: 42%; width: 50%; }
    .mv_text4 { top: 45%; width: 85%; }
    .notes-area {
        margin: 0 auto;
    }
    .p-concept {
        padding: 40px 0;
    }
}