@charset "UTF-8";

.sec_ttl{
    text-align: center;
    font-size: 3.0rem;
    font-weight: 700;
    margin-bottom: 80px;
}
.sec_ttl .en{
    position: relative;
    font-size: 4.0rem;
}
.sec_ttl .jp{
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700 !important;
    font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif !important;
}
.sec_ttl:after{
    display: block;
    content: '';
    margin: 15px auto 0 auto;
    width: 200px;
    height: 5px;
    background: #d2c874;
}

@media screen and (max-width: 767px) {
    .sec_ttl{
        text-align: center;
        font-size: 6.4vw;
        line-height: 1.5;
        margin-bottom: 80px;
    }
    .sec_ttl .en{
        font-size: 7.8vw;
    }
    .sec_ttl .jp{
        top: -6vw;
        font-size: 3.8vw;
    }
    .sec_ttl:after{
        margin: 10px auto 0 auto;
        width: 45vw;
    }


}
/*  sec01 -------------------------------------------*/
.sec01{
    position: relative;
    padding: 0 0 50px 0;
    box-sizing: border-box;
}

.sec01 .box{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sec01 .box+.box{margin-top: 50px;}

.sec01 .box .img{
    position: relative;
    width: 45%;
    max-width: 515px;
    z-index: 1;

}
.sec01 .box .txt{
    position: relative;
    width: 69%;
    max-width: 720px;
    margin-left: -50px;
    padding: 38px;
    box-sizing: border-box;
    z-index: 3;
}

.sec01 .box.premium .txt{ background: #3a829a;}
.sec01 .box.style .txt{ background: #5d7b85;}
.sec01 .box.with-architect .txt{ background: #a9bf89;}
.sec01 .box.rewood .txt{ background: #d2c874;}
.sec01 .box.zeh .txt{ background: #ccc6a6;}

.sec01 .box .txt .catch{
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.sec01 .box .txt .ttl{
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 20px;
}
.sec01 .box .txt .ttl .en{
    display: block;
    font-size: 4.0rem;
    letter-spacing: .3rem;
    margin-bottom: 22px;
}
.sec01 .box .txt p{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2.14;
    color: #FFF;
}
.sec01 .box .txt .more_link{
    position: absolute;
    right: 10px;
    bottom: 20px;
    display: block;
    width: 138px;
    font-size: 1.6rem;
    letter-spacing: .12rem;
    color: #FFF;
	line-height: 2.14;

}
.sec01 .box .txt .more_link:after{
    position: absolute;
    right: 15px;
    bottom: 0;
    display: block;
    content: '';
    width: 100%;
    height: 18px;
    border-bottom: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: skew(45deg);
}

.sec01 .box .txt a{
    display: block;
    transition: .4s;
}
.sec01 .box .txt a:hover{
    text-decoration: none;
    opacity: .7;
}


@media screen and (max-width: 767px) {
    .sec01{
        padding: 0 0 10% 0;
    }
    .sec01 .box{
        display: block;
    }
    .sec01 .box_wrap.wrap{ width: 100%;}

    .sec01 .box+.box{margin-top: 12%;}

    .sec01 .box .img{
        position: relative;
        width: 100%;
        max-width: inherit;

    }
    .sec01 .box .txt{
        width: 92%;
        max-width: inherit;
        margin: 0 auto;
        padding: 6% 5%;
    }

    .sec01 .box .txt .catch{
        font-size: 4.4vw;
        margin-bottom: 8%;
    }
    .sec01 .box .txt .ttl{
        font-size: 3.8vw;
        line-height: 1.6;
        margin-bottom: 8%;
    }
    .sec01 .box .txt .ttl .en{
        font-size: 10vw;
        line-height: 1.1;
        margin-bottom: 1%;
    }
    .sec01 .box .txt p{
        font-size: 3.6vw;
        line-height: 2;
    }
    .sec01 .box .txt .more_link{
        position: relative;
        right: 0;
        bottom: 0;
        margin: 5% 0 0 auto;
        width: 32vw;
        font-size: 3.8vw;
    }
    .sec01 .box .txt .more_link:after{
        right: 15px;
        height: 4vw;
    }

}