@charset "utf=8";

/* ==========================================
MACHI LIBRARY
========================================== */

.machilibraryWr01 {
    position: relative;
    overflow: hidden;
}

.machilibraryMainWr01 {
    padding: 0 1.5rem 0 0;
    width: 100%;
}

.machilibraryBoxWr01 {
    max-width: 172.6rem;
    width: 100%;
    position: relative;
    margin: 0 auto 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.machilibraryFlexLeftBox01 {
    max-width: 104.3rem;
    width: 60.43%;
}

.machilibraryFlexRightBox01 {
    max-width: 77.8rem;
    width: 45.08%;
    margin: 0 0 0 -6.08%;
    padding-top: 10.4rem;
    position: relative;
}

.machilibraryFlexTit01 {
    font-size: 5rem;
    font-weight: 600;
    line-height: 1.55em;
}

.machilibraryFlexTextBox01 {
    margin-top: 7rem;
    max-width: 63rem;
    width: 100%;
}

.machilibraryFlexTextBox01>p:first-child {
    margin-top: 0;
}

.machilibraryFlexTextBox01>p {
    margin-top: 4rem;
    line-height: 3.125em;
    font-weight: 400;
}

.machilibraryFlexImg01 {
    width: 100%;
    padding-top: 55.8%;
    position: relative;
}

.machilibraryFlexImg01>img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.machilibraryFlexImg02 {
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.machilibraryFlexImgList01 {
    max-width: 42.6rem;
    width: 40.81%;
    margin: -22% auto 0;
}

.machilibraryFlexImg02>img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    object-fit: cover;
}

.machilibraryDeco01 {
    max-width: 53.5rem;
    width: 27.86%;
    position: absolute;
    top: 54%;
    left: 9.2%;
    z-index: 1;
}

.machilibraryDeco02 {
    max-width: 33.9rem;
    width: 44%;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.machilibraryWr02 {
    background: #F3F1EE;
}

.machilibraryMainWr02 {
    max-width: 144rem;
    width: 100%;
    margin: 0 auto;
}

.machilibraryBox02 {
    width: 100%;
}

.machilibraryTitDecoBox {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3rem;
}

.machilibraryTitDeco {
    max-width: 4rem;
    width: 5%;
    display: block;
}

.machilibraryTitEn {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.25em;
    font-family: var(--font-family01);
    color: #B7C8CD;
}

.machilibraryTitJa {
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.45em;
}

.machilibraryLeftBox02 {
    max-width: 70rem;
    width: 48.61%;
    margin-top: 7rem;
}

.machilibraryRightBox02 {
    max-width: 70rem;
    width: 48.61%;
}

.machilibraryFlexBox02 {
    margin-top: 10.8rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.machilibraryTextBox02 {
    max-width: 53rem;
    width: 100%;
    margin: 0 0 0 auto;
    font-weight: 400;
    line-height: 3.125em;
}

.machilibraryImgSetBox02 {
    max-width: 67rem;
    width: 100%;
    margin: 0 0 0 auto;
}

.machilibraryImgBox0201 {
    max-width: 39.3rem;
    width: 62.38%;
}

.machilibraryImgBox0201 figure {
    width: 100%;
    padding-top: 66.47%;
    position: relative;
}

.machilibraryImgBox0201 figure>img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.machilibraryImgBox0202 {
    max-width: 52.4rem;
    width: 83.21%;
    margin: -9% 0 0 auto;
}

.machilibraryImgBox0202 figure {
    width: 100%;
    padding-top: 66.65%;
    position: relative;
}

.machilibraryImgBox0202 figure>img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.machilibraryTextBox03 {
    max-width: 53rem;
    width: 100%;
    margin: 9rem auto 0 0;
}

.machilibraryImgBox03 {
    max-width: 63.5rem;
    width: 100%;
    margin: 12.4rem 0 0 0;
}

.machilibraryText01 {
    font-weight: 400;
    line-height: 3.125em;
}

.snsBtn01 {
    max-width: 32.2rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.1rem solid #000;
    padding: 0.5rem;
    height: 6rem;
    gap: 2rem;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    margin: 5rem 0 0 auto;
    background: #fff;
}

.snsBtn01:hover {
    text-decoration: underline;
}

.snsIcon01 {
    max-width: 2.7rem;
    width: 100%;
    display: block;
}

.machilibraryBox03 {
    max-width: 110rem;
    width: 100%;
    margin: 10rem auto 0;
    padding: 6.5rem 1.5rem 6rem !important
}

.machilibraryMaskTextBox {
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.machilibraryMaskTextList02 {
    margin: 2rem 0 4rem;
}

.machilibraryMaskTextList02>p {
    border-bottom: 0.1rem solid #fff;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 3.125em;
    display: inline-block;
}

.machilibraryMaskTextList02>p strong {
    font-size: 2rem;
    font-weight: 500;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

    .machilibraryFlexTit01 {
        font-size: 3.5rem;
    }

    .machilibraryFlexRightBox01 {
        padding-top: 5.4rem;
        width: 50%;
        margin: 0 0 0 -11.08%;
    }

    .machilibraryFlexTextBox01 {
        margin-top: 3.5rem;
    }
    
    .machilibraryFlexTextBox01>p {
        margin-top: 2rem;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

    .machilibraryBoxWr01 {
        margin: 0 auto;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .machilibraryMainWr01 {
        padding: 0 1.5rem;
    }

    .machilibraryFlexLeftBox01 {
        width: 100%;
    }
    
    .machilibraryFlexRightBox01 {
        width: 100%;
        margin: 0 auto;
        padding-top: 4.4rem;
    }

    .machilibraryDeco01 {
        z-index: -1;
    }

    .machilibraryTitEn {
        font-size: 1.6rem;
    }
    
    .machilibraryTitJa {
        font-size: 3rem;
    }

    .machilibraryFlexBox02 {
        margin-top: 5.8rem;
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .machilibraryLeftBox02 {
        width: 100%;
        margin-top: 0;
        display: flex;
        flex-direction: column-reverse;
    }
    
    .machilibraryRightBox02 {
        width: 100%;
        margin-top: 7rem;
    }

    .machilibraryImgBox03 {
        margin: 0 0 5.4rem 0;
    }

    .machilibraryTextBox03 {
        margin: 5rem auto 0 0;
    }

    
    .machilibraryFlexTextBox01>p {
        line-height: 2em;
    }

    .machilibraryTextBox02 {
        line-height: 2em;
    }

    .machilibraryText01 {
        line-height: 2em;
    }

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

    .machilibraryMaskTextList02>p {
        display: inline;
    }

    .machilibraryMaskTextBox {
        text-align: left;
    }
    
    .machilibraryTitJa {
        font-size: 2rem;
    }
    
    .machilibraryTitDeco {
        display: none;
    }
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {

    .machilibraryFlexTit01 {
        font-size: 3rem;
    }
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */