@charset "UTF-8";


/* ===== タイトル（中央） ===== */
.title {
    text-align: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 2s ease;
}

/* ===== 線 ===== */
.line {
    height: 1px;
    width: 66.66%;
    background: #333;
    margin: 20px 0;

    transform: scaleX(0);
    transition: transform 1s ease;
}

/* ===== 説明文 ===== */
.read-copy {
    max-width: 500px;
    opacity: 0;
    /* transform: translateY(10px); */
    transition: all 1s ease;
}

/* ===== 左パターン ===== */
.section-title-l .line {
    margin-right: auto;
    transform-origin: left;
}

.section-title-l .read-copy {
    margin-left: 100px;
    transform: translateY(0px) translateX(-20px);
}

/* ===== 右パターン ===== */
.section-title-r .line {
    margin-left: auto;
    transform-origin: right;
}

.section-title-r .read-copy {
    margin-right: 100px;
    margin-left: auto;
    text-align: right;
    transform: translateY(0px) translateX(20px);
}

/* ===== アニメーション発火 ===== */
.js-animate.show .title {
    opacity: 1;
    transform: translateY(0);
}

.js-animate.show .line {
    transform: scaleX(1);
}

.js-animate.show .read-copy {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}



/* レスポンシブ */

@media(max-width: 768px) {

    /* ===== 左パターン ===== */
    .section-title-l .read-copy {
        margin-left: 24px;
        transform: translateY(0px) translateX(-20px);
    }

    /* ===== 右パターン ===== */

    .section-title-r .read-copy {
        margin-right: 24px;
        margin-left: auto;
        text-align: right;
        transform: translateY(0px) translateX(20px);
    }


    .line {
        margin: 4px 0;
    }
}