.main {
    font-weight: 300;
    line-height: 1.6;
}

.section {
    display: flex;
    flex-direction: column;
    padding: 14% 0 9.2%;
}

.section::before {
    display: inline-block;
    content: "";
    background: url(../images/line_sp.png) no-repeat top / cover;
    width: 100%;
    height: 3vw;
    position: absolute;
    top: 0;
    left: 0;
}

.section-inner {
    padding: 0 5.1%;
}

.section-title.vertical {
    writing-mode: vertical-rl;
    font-size: min(10.2vw, 6.4rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    
    & span {
        display: block;
        font-size: 1.5rem;
        letter-spacing: 0.1em;
    }
}

.section-title {
    & img {
        width: min(24.6vw, 132px);
    }
}

.section-desc {
    margin-top: 5.1%;
}

.section-img {
    margin-top: 8.2%;
}

.view {
    margin-top: 5.7%;
}

/* hero */
.hero {
    padding-bottom: 9%;

    & .section-title {
        margin-top: -36%;
    }
}

.hero-inner {
    display: flex;
    flex-direction: column;
    padding: 0 5.1%;
}

.hero-text {
        /* margin-top: 5.1%; */

    & p {
        margin-top: 5.1%;
    }
}

/*wood */
.wood {

    & .section-title {
        margin-left: auto;
    }

    & .section-img {
        margin-top: 5.8%;
    }

    & .section-text {
        padding: 0 5.1%;
        margin-top: 5.1%;
    }
}

/* section-info */ 
.section-info {
    padding: 11% 5.1% 8.2%;
}


@media (min-width: 1024px) {
    .section {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 5% 2.8% 1.8%;
    }

    .section::before {
        background: url(../images/line.png) no-repeat center / contain;
    }

    .section-inner {
        width: 31.8%;
        padding: 0;

        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    .section-desc {
        margin-top: 9.3%;
    }

    .section-img {
        width: 65.9%;
        margin-top: 0;
    }


    /* hero */
    .hero {
        padding-bottom: 5.5%;

        & .section-title {
            margin-top: -24%;
        }
    }

    .hero-inner {
        padding: 0 2.8%;
    }

    .hero-text {
        display: flex;
        margin-top: -15%;

        & .hero-text-inner {
            width: 31.8%;
            margin-right: 3.3%;
        }

        & p {
            margin-top: 7.4%;
        }
    }

    /* wood */
    .wood {
        padding: 5% 2.8% 1.8%;

        .section-inner {
            width: 100%;
            flex-direction: row;
        }

        & .section-title {
            margin-left: 5.6%;
        }

        .section-img {
            margin-top: 0;
        }

        .section-text {
            width: 65.9%;
            margin: 2.9% 0 0 auto;
            padding: 0;
        }

        & .section-img,
        & .section-text {
            display: flex;
            justify-content: space-between;

            & img,
            & p {
                width: 48.2%;
            }
        }
    }

    /* shelf */
    .shelf {
        flex-direction: row-reverse;
    }
}