@charset "UTF-8";
/* MV
---------------------------------------------------------------------------- */
.roots-mv{
    width:100%;
    margin:0 auto; 
    padding-top:60px;
    text-align: center;
    position: relative;
    color: #fff;
}
.roots-mv-inner{
    width:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translateY(-50%) translateX(-50%);
}
.roots-mv-head{
    font-size:6.5rem;
    font-weight: bold;
    text-shadow: 0px 0px 6px rgba(0,0,0,.16);
}
.roots-mv p{ text-shadow: 0px 0px 6px rgba(0,0,0,.16);}

@media screen and (max-width: 768px) {
    .roots-mv-inner{top: 53%;}
    .roots-mv-head{font-size:10.667vw;}
    .roots-mv p{ line-height: 1.7;
    }
}

/* common
---------------------------------------------------------------------------- */
.roots{
    width:100%;
    margin:150px auto 0; 
}
.roots-inner{
    max-width: 1150px;
    margin:0 auto; 
}
.roots-head{
    background: #2274B6;
    color: #fff;
    position: relative;
    padding:50px 0;
}
.roots-head-catch{
    font-size:11rem ;
    font-weight: bold;
    color:#E5E5E5;
    position: absolute;
    top:-145px;
}
.roots-head-sub{
    font-size:1.6rem ;
    font-weight: bold;
}
.roots-head-ttl{
    font-size:4rem ;
    font-weight: bold;
}
.roots-head-image{
    margin:0 0 0 auto;
    position: absolute;
    right:calc((100% - 1200px) / 2);
}
.roots-head-image-inner{position: relative;}
.annotations{
    display: block;
    color: #000;
    font-size:1.2rem;
    line-height: 1.5;
    padding-left: 1.5em;
    text-indent: -1.5em;
    margin-top:10px;
    letter-spacing: 0px;
}
.roots-bg{
    background: #F2F2F2;
    padding:20px 0 50px;
}
.roots-con{padding:30px 0;}
.roots-con-ttl{
    color:#2274B6;
    font-weight: bold;
    font-size:3rem;
    line-height: 1.5;
    border-bottom:2px solid #2274B6;
    padding-bottom:10px;
    margin-bottom:20px;
}
.roots-con-ttl span{
    display: inline-block;
    color:#8A682A;
    font-size:1.4rem;
    line-height: 1.5;
}
.roots-con p{
    line-height: 1.5;
    margin-bottom:20px;
}
.flex{
    display: flex;
    justify-content: space-between;
}
.roots-con-next{
    background: #fff;
    padding:20px;
    margin-top:40px;
}
.roots-con-next h4{border:none;}
.roots-con-next p{
    margin-bottom:0;
    line-height: 1.5;
}

.roots-con-txtbox-c{width:655px;}
.roots-con-txtbox-c + .roots-con-image{
    width:39%;
    position: relative;
}
.roots-con .flex p{margin-right:10px;}
.roots-con .flex p:last-of-type{margin-right:0;}

@media screen and (max-width: 768px) {
    .roots{
        width:100%;
        margin:20vw auto 0; 
    }
    .roots-inner{width:95%;}
    .roots-head{padding:10vw 0;}
    .roots-head-catch{
        font-size: 9.5vw;
        top: -7.733vw;
        line-height: 1;
    }
    .roots-head-sub{font-size: 3.733vw}
    .roots-head-ttl{font-size: 8vw;}
    .roots-head-image{
        margin:0 0 0 auto;
        position: absolute;
        right:calc((100% - 1200px) / 2);
    }
    .annotations{font-size: 2.933vw;}
    .roots-bg{padding:0 0 7vw;}
    .roots-con{padding:5vw 0;}
    .roots-con-ttl{
        padding-bottom:2.667vw;
        margin-bottom:5.333vw;
        font-size:7.467vw;
    }
    .roots-con-ttl span{font-size:3.646vw ;}
    .roots-con p{
        line-height: 1.5;
        margin-bottom:5vw;
    }
    .flex{flex-wrap: wrap;}
    .roots-con-next{
        padding:7vw 3vw;
        margin-top:10.667vw;
        text-align: center;
    }
    .roots-con-next .roots-con-ttl{margin-bottom:0vw}
    .roots-con-next p{
        margin-bottom:0;
        line-height: 1.5;
    }
    .roots-con-txtbox-c{width:100%;}
    .roots-con .flex p{margin-right:2.604vw;}
    .roots-con .flex p:last-of-type{margin-right:0;
    }
}

/* mannequin
---------------------------------------------------------------------------- */
#mannequin .roots-head-image{
    width:440px;
    top:-83px;
}
#mannequin .roots-head-image p:nth-of-type(1){
    position: absolute;
    top: 429px;
    right: 53px;
}
#mannequin .roots-head-image p:nth-of-type(2){
    position: absolute;
    bottom: -21px;
    right: 58px;
}
#mannequin .roots-con-flex{
    display: flex;
    justify-content: space-between;
    width:700px;
}
#mannequin .roots-con-flex p{
    width:70%;
    padding-right:30px;
}
#mannequin .roots-con-flex figure{width:30%;}
#mannequin .roots-con.con1 .roots-inner > p{width:80%;}
#mannequin .roots-con.con1 .roots-con-ttl{
    width:700px;
}
#mannequin .roots-con.con2{
    width:45%;
    padding-right:40px;
}
#mannequin .annotations-flex{
    display: flex;
    justify-content: space-around;
}
#mannequin .roots-con.con3{
    width:55%;
}
#mannequin .roots-con-next h4{letter-spacing: -0.01em;}

@media screen and (max-width: 768px) {
    #mannequin .roots-con-flex{
        flex-wrap: wrap;
        width:100%;
    }
    #mannequin .roots-con-flex p{
        width:100%;
        padding-right:0px;
    }
    #mannequin .sp_image{width:100%;}
    #mannequin .sp_image p{width:calc((100% - 5.208vw) / 3);}
    #mannequin .roots-con-flex figure{
        width:100%;
        margin-bottom:5vw;
    }
    #mannequin .roots-con.con1 .roots-inner > p{width:100%;}
    #mannequin .roots-con.con1 .roots-con-ttl{width:100%;}
    #mannequin .roots-con.con2{
        width:100%;
        padding-right:0px;
        padding: 5vw 0 0;
    }
    #mannequin .roots-con.con3{ width:100%;}
    #mannequin .roots-con-next h4{letter-spacing: 0em;}
}

/* VP DECORATION
---------------------------------------------------------------------------- */
#vp .roots-head-image{
    width:360px;
    top:60px;
}
#vp .roots-con-txtbox{
    width:780px;
    margin-bottom:40px;
}
#vp .roots-con.con4{padding:30px 0 0;}
@media screen and (min-width: 769px) {
#vp .roots-con.con4 .flex p img{
   flex-grow: 1;
   object-fit: cover;
   width:auto;
   height: 279px;
}
}

@media screen and (max-width: 768px) {
    #vp .roots-con-txtbox{
        width:100%;
        margin-bottom:0px;
    }
    #vp .roots-con-txtbox .flex > p{ width:50%;}
    #vp .roots-con-txtbox .flex div{
        width:50%;
        padding-left:2.604vw;
    }
    #vp .roots-con.con4{padding:30px 0 0;}
    #vp .con4-image p:nth-of-type(1){width:39.5%}
    #vp .con4-image p:nth-of-type(2){width:57.7%}
    #vp .con4-image p:nth-of-type(2){margin-right:0;}
    #vp .con4-image p:nth-of-type(3){width:100%;
    }
}

/* RENTAL FURNITURE
---------------------------------------------------------------------------- */
#rental .roots-head-image{
    width:477px;
    top:60px;
}
#rental .roots-head-image p:nth-of-type(1){
    position: absolute;
    top: 387px;
    right: -4px;
    letter-spacing: 0px;
}
#rental .roots-head-image p:nth-of-type(2){
    position: absolute;
    bottom: 163px;
    left: 0;
    letter-spacing: 0px;
}
#rental .roots-head-image p:nth-of-type(3){
    position: absolute;
    bottom: -21px;
    right: 80px;
}
#rental .roots-bg{padding:20px 0 0px;}
#rental .roots-con.con6 .flex > p{width:39%;}
#rental .roots-con.con6 .flex:first-of-type{
    align-items: flex-end;
    margin-bottom:20px;
}
@media screen and (min-width: 769px) {
#rental .roots-con.con6 .roots-con-bottom p img{
  flex-grow: 1;
  object-fit: cover;
  width:auto;
  height: 228px;
}
}
#rental .roots-con.con6 .roots-con-bottom p{margin-right:10px;}


#rental .roots-con.con7 .roots-con-image p:nth-of-type(1) {
    position: absolute;
    top: 195px;
    right: -4px;
    letter-spacing: 0px;
}
#rental .roots-con.con7 .roots-con-image p:nth-of-type(2) {
    position: absolute;
    top: 321px;
    left: 0;
    letter-spacing: 0px;
}
#rental .roots-con.con7 .flex{align-items: center;}

/* digi */
#rental .roots-bg.digital{padding:50px 0;}
#rental .digital-head{
    background:#2274B6;
    text-align: center;
    padding:30px 0;
}
#rental .digital-sub{
    background:#fff ;
    color:#2274B6;
    font-weight: bold;
    border-radius:10px;
    display: inline-block;
    margin:0 auto 10px;
    text-align: center;
    padding:0 20px;
}
#rental .digital-ttl{
    font-weight: bold;
    font-size:3rem;
    line-height: 1.5;
    text-align: center;
    color:#fff;
}
#rental .roots-con.con8 .flex.roots-con-top{
    align-items: flex-end;
    margin-bottom:20px;
}
#rental .roots-con.con9 .roots-con-image{display: flex;}
#rental .roots-con.con9 .flex.roots-con-top{
    align-items: flex-end;
    margin-bottom:20px;
}
#rental .roots-con-next{
    text-align: center;
    padding:40px 0;
    margin-top: 0px;
}

@media screen and (max-width: 768px) {
    #rental .roots-bg{padding:3vw 0 0;}
    #rental .con5-image p:nth-of-type(1){width:52%;}
    #rental .con5-image p:nth-of-type(2){
        width:45%;
        margin-right: 0;
    }
    #rental .con5-image p:nth-of-type(3){width:100%;}
    #rental .roots-con.con6 .flex:first-of-type{margin-bottom:5vw;}
    #rental .roots-con.con6 .roots-con-image{width:100%;}
    #rental .roots-con.con6 .roots-con-bottom p{margin-right:0px;}
    #rental .roots-con.con6 .roots-con-bottom p:nth-of-type(1),
    #rental .roots-con.con6 .roots-con-bottom p:nth-of-type(2){width:48.5%;}
    #rental .roots-con.con6 .roots-con-bottom p:nth-of-type(3),
    #rental .roots-con.con6 .roots-con-bottom p:nth-of-type(4){width:48.5%;}
    .roots-con.con7 {padding: 5vw 0 21.333vw;}
    #rental .roots-con.con7 .roots-con-ttl{letter-spacing: -0.03em;}
    #rental .roots-con.con7 .roots-con-image{width:100%;}
    #rental .roots-con.con7 .roots-con-image p:nth-of-type(1) {
        position: absolute;
        top: 41.067vw;
        right: 6.133vw;
    }
    #rental .roots-con.con7 .roots-con-image p:nth-of-type(2) {
        position: absolute;
        top: 67.733vw;
        left: 0;
    }

    /* digi */
    #rental .roots-bg.digital{padding:10vw 0;}
    #rental .digital-head{padding:5vw 0;}
    #rental .digital-sub{
        margin:0 auto 2.667vw;
        width:95%;
        line-height: 1.5;
        padding:2vw 0px;
    }
    #rental .digital-ttl{
        font-weight: bold;
        font-size:3rem;
        line-height: 1.5;
        text-align: center;
        color:#fff;
    }
    #rental .roots-con.con8{padding: 5vw 0 0;}
    #rental .roots-con.con8 .roots-con-top{margin-bottom:5vw;}
    #rental .roots-con.con8 .roots-con-image{width:100%;}
    #rental .roots-con.con8 .roots-con-bottom p{width:calc((100% - 2.604vw) / 2);}
    #rental .roots-con.con8 .roots-con-bottom p:nth-of-type(even){margin-right:0;}
    #rental .roots-con.con9 .roots-con-image{width:100%;}
    #rental .roots-con.con9 .roots-con-bottom{widtg:100%;}
    #rental .roots-con.con9 .roots-con-bottom p{width:calc((100% - 2.604vw) / 2);}
    #rental .roots-con.con9 .roots-con-bottom p:nth-of-type(even){margin-right:0;}
    #rental .roots-con.con9 .roots-con-bottom p:last-of-type{width:100%;}
    #rental .roots-con-next{padding:7vw 3vw;
    }
}

/* SPATIAL, INTERIOR
---------------------------------------------------------------------------- */
#spatial-interior .roots-head-image{
    width:550px;
    top:150px;
}
#spatial-interior .roots-head-image p{
    position: absolute;
    bottom: -20px;
    left: 0;
    letter-spacing: 0px;
}
#spatial-interior .roots-con.con10 .roots-con-txtbox{
    width:580px;
}
#spatial-interior .roots-bg{padding:20px 0 0px;}
#spatial-interior .roots-con.con11 .roots-con-image p:nth-of-type(1) {
    position: absolute;
    top: 195px;
    right: 2px;
    letter-spacing: 0px;
}
#spatial-interior .roots-con.con11 .roots-con-image p:nth-of-type(2) {
    position: absolute;
    top: 329px;
    left: 6px;
    letter-spacing: 0px;
}
#spatial-interior .roots-con.con11 .flex{ align-items: center;}
#spatial-interior .roots-con.con12 .flex{ align-items: flex-end;}

@media screen and (max-width: 768px) {
    #spatial-interior .roots-con.con10 .roots-con-txtbox{ width:100%;}
    #spatial-interior .roots-bg{padding:3vw 0 10vw;}
    #spatial-interior .roots-con.con11 .roots-con-image{width:100%;}
    #spatial-interior .roots-con.con11 .roots-con-image p:nth-of-type(1) {
        position: absolute;
        top: 41.067vw;
        right: 8.6vw;
    }
    #spatial-interior .roots-con.con11 .roots-con-image p:nth-of-type(2) {
        position: absolute;
        top: 69.333vw;
        left: 1.6vw;
    }
     #spatial-interior .roots-con.con12 .roots-con-image{width:100%;
    }
}