@charset "UTF-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}
*  {
    min-height: 0;
    min-width : 0;
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body{
    color: #333;
    font-size: 1.6em;
    background-color: #fff;
    overflow-x: hidden;
    letter-spacing: 0.05em;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align:middle;
}
a {
    cursor: pointer;
    color: #333;
}

.bodyWrap{
    position: relative;
    z-index: 1;
}
.area-header img {
    width: 100%;
}


:root {
    --green:#56532B;
    --white:#fff;
    --black:#000;
    --grey:#656565;
    --brown:#72503b;
    --roboto:'Roboto', sans-serif;
    --aktiv-grotesk: aktiv-grotesk, sans-serif;
    --adobe-caslon-pro:"adobe-caslon-pro", serif;
    --garamond:"garamond-premier-pro", serif;
}

.area-header{
    padding-top: 20px;
    }
.effect-fade {
    opacity: 0;
    transform: translate(0, 0px); /*fadein X,Y,*/
    transition: all 1600ms; /*fadein_time*/
}
.effect-scroll {
    opacity: 1;
    transform: translate(0, -20px);
}
.area-body{
    margin: 0 auto;
    width: 100%;
    padding: 20px 0 0;
    position: relative;
    background: #fff;
    z-index: 2;
    top: 2px;
}
.mainvisual{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    }
.main_lead{
    max-width: 880px;
    margin: 50px auto 30px;
    text-align: center;
    font-size: 16px; 
}


.reverse {
    flex-direction: row-reverse;
}
.main_area {
/*    max-width: 1080px;*/
    margin: 190px auto 0;
}

a.view_all_btn{
    display: block;
    text-decoration: none;
    background: #fff;
    font-weight: 600;
    font-size: 20px;
    width: 600px;
    margin: 70px auto 0;
    padding: 13px 0;
    border: #2c1e1d solid 1px;
    transition: .4s;
}
a.view_all_btn:hover{
    background: #2c1e1d;
    color: #fff;
}



@media screen and (max-width: 896px){

    .brand_logo {
        position: absolute;
        top: 67%;
        left: 36%;
    }
   .area-header .brand_logo .text{
        width: 260px;
        margin: -15px 0 0 auto;
    }

    .area-header .brand_logo .blueblue_logo { 
        width: 80px;
        margin: -14px 24px 0 auto;
    }
    .main_lead{
        font-size: 14px !important;
        width: 100%;
        text-align: center;
        padding: 0 13px;
        margin: 70px auto;
        line-height: 1.8;
    }
    
    .area-body{
        margin: 0 auto;
        box-sizing: border-box;
        text-align: left;
        width: 100%;
        max-width: 100%;
    }
    .main_lead_ttl{
        font-size: 15px !important;
        width: 100%;
        text-align: center;
        padding: 0 20px;
        margin: 50px auto;
    }
    .main_area {
        margin-top:0; 
    }
    .about_area {
        width: 96%;
        padding: 40px 20px;
        text-align: left;
        font-size: 14px;
        line-height: 1.8;
    }

    .main_wrap{
        flex-flow: column;
        margin: 30px auto;
    }
    .main_wrap p{
        font-size: 14px;
        padding: 0 20px;
    }

    .brand_logo {
        position: absolute;
        top: 50%;
        left: 56%;
    }
    
    .area-header .brand_logo .text{
        display: block;
        width: 556px;
        margin: -15px -40px 0 auto;
    }
    
    .area-header .brand_logo .blueblue_logo {
        display: block;
        width: 150px;
        margin: -15px 0 0 auto;
    }

    a.view_all_btn{
        width: 90%;
        margin: 40px auto 0;
        padding: 8px 0;
        font-size: 14px;
        text-align:center;
    }
    a.view_more_btn {
        width: 70%;
        padding: 7px 0;
        margin:20px auto
    }

}