@charset "utf-8";
.subhead{
    background: url(../img/design/subhead.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.subhead_ttl_ja {
    letter-spacing: 0.1em;
}
.section_lead{
    font-size: 18px;
}

.section_box::before {
    background: linear-gradient(180deg, #fff, #c2c2b7);
}

.lazona_sec .section_lead span{
    letter-spacing: -0.05em;
    font-size: 0.95em;
}

.lazona_sec{
    margin-top: 60px;
}
.loc_flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* margin-bottom: 50px; */
}
.lazona_half{
    /* margin-top: 2%; */
}
.lazona_half > div{
    width: 49%;
}

.loc_list_ttl{
    text-align: center;
    font-size: 18px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #8187c2, #6356a3) 1;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
}
.loc_list_ttl p{
    text-align: left;
}
.loc_list_ttl span{
    font-size: 0.8em;
    display: inline-block;
}
.loc_list_lead{
    text-align: justify;
    font-size: 15px;
    line-height: 1.8;
}
.loc_list_lead span{
    /* display: inline-block; */
}
.loc_list_lead span.small{
    font-size: 10px;
}

.loc_list_item.loc_flex{
    align-items: flex-end;
}
.loc_flex > .loc_list_text{
    width: 38%;
}
.loc_flex > .loc_list_img{
    width: 58%;
}

.loc_list_item.col2{
    width: 49%;
}
.loc_list_item.col2 .loc_list_img{
    margin-bottom: 10px;
}
.loc_list_item.col2:nth-child(n + 3){
    margin-top: 4%;
}

.loc_list_item.col3{
    width: 32%;
    display: flex;
    flex-direction: column;
}
.loc_list_item.col3 .loc_list_img{
    margin-bottom: 10px;
}
.loc_list_item.col3:nth-child(n + 4){
    margin-top: 4%;
}

.loc_list_item.col4{
    width: 23%;
}
.loc_list_item.col4 .loc_list_img{
    margin-bottom: 10px;
}
.loc_list_item.col4:nth-child(n + 5){
    margin-top: 4%;
}

.loc_list_name{
    font-size: 12px;
    text-align: left;
}
.loc_list_name .long{
    letter-spacing: -0.05em;
    font-size: 0.9em;
}

.gourmet_list .loc_list_name{
    margin-bottom: 0.5em;
}




.designer_box{
    background: linear-gradient(90deg, #efebe5, #cac2b2 10% 90%, #efebe5);
    padding: 20px 50px;
}
.designer_ttl{
    text-transform: uppercase;
    color: #fff;
    font-size: 28px;
    margin: 0 0 10px;
    letter-spacing: 0.08em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.designer_ttl::after{
    content: "";
    height: 2px;
    width: 80%;
    background: #fff;
}
.designer_flex{
    display: flex;
    justify-content: space-between;
}
.designer_neme_box{
    background: #a29478;
    color: #fff;
}
.designer_neme_box span{
    font-size: 1.7em;
}
.designer_img{
    width: 20%;
}
.designer_txt{
    width: 80%;
}

.plant_box{
    background: #fff;
    /* border: solid 2px #6356a3; */    
    /* padding: 20px; */
}

.plant_flex{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.plant_flex > li{
    width: 32%;
    max-width: 156px;
}
.plant_flex > li:nth-of-type(n + 4){
    margin-top: 2%;
}

.plant_flex > li p{
    font-size: 10px;
    text-align: center;
    color: #fff;
    background: linear-gradient(to right, #8187c2, #41356f);
    padding: 5px 0;
}

.loc_sub_ttl02{
    text-align: center;
    font-size: 20px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #8187c2, #6356a3) 1;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    line-height: 1.5em;
    height: 3.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.designer_neme_box{
    padding: 10px;
}

.designer_txt_ttl{
    font-size: 18px;
    margin: 20px 0 15px;
    text-align: center;
    line-height: 1.4;
}
.designer_txt_lead{
    font-size: 14px;
    line-height: 1.5;

}
.designer_txt_ttl,.designer_txt_lead{
    margin-left: 20px;
}
.designer_profile{
    background: #d7d0c4;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    padding-left: 20px;
    margin-top: 27px;
}
.designer_profile_ttl{
    padding-right: 7px;
    margin-right: 7px;
    border-right: 2px solid #826e49;
    line-height: 1.5em;
}
.designer_profile_lead{
    font-size: 12px;
    letter-spacing: -0.04em;
}

.list_flex{
    display: flex;
    align-items: center;
    padding-bottom: 0;
}
.list_flex > p{
    flex: 1;
}
.list_num{
    width: 50px;
    background: linear-gradient(to right, #8187c2, #6356a3);
    /* background: #cca200; */
    /* margin-bottom: -10px; */
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
}
.list_bg01{
    background: linear-gradient(0deg, #d9c67f, #eee9cb 50%, #ffffff);
    padding: 0px 20px 15px;
    min-height: 145px;
    flex-grow: 1;
}

.garden_box{
    /* background: linear-gradient(0deg, #6355a1, #3c3268); */
    background: linear-gradient(0deg, #d9c67f, #eee9cb 50%, #ffffff);
    border: 2px solid #3f336b;
    color: #000;
    padding: 20px;
}

.garden_txt{
    /* width: 58%; */
    color: #fff;
    /* background: linear-gradient(0deg, #3c3268, #6355a1 50%, #3c3268); */
}
.garden_txt > .loc_flex{
    padding: 15px;
    margin-bottom: 0;
    /* background: linear-gradient(0deg, #6355a1, #3c3268); */
}
.garden_img{
    /* width: 40%; */
}
.garden_lead{
    width: 100%;
}
.garden_txt_img{
    width: 44%;
    margin-bottom: 0 !important;    
}
.garden_txt_img > div:nth-of-type(n + 3){
    margin-top: 4%;
}
/* .garden_txt_img01{
    width: 38%;
    max-width: 91px;
    background: url(../img/design/garden_img01.jpg)no-repeat;
    background-size: cover;
}
.garden_txt_img02{
    width: 58%;
    max-width: 140px;
    background: url(../img/design/garden_img02.jpg)no-repeat;
    background-size: cover;
}
.garden_txt_img03{
    width: 48%;
    max-width: 116px;
    background: url(../img/design/garden_img03.jpg)no-repeat;
    background-size: cover;
}
.garden_txt_img04{
    width: 48%;
    max-width: 116px;
    background: url(../img/design/garden_img04.jpg)no-repeat;
    background-size: cover;
} */
.garden_img_flex{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

}
.garden_img_flex01{
    width: 16%;
    max-width: 152px;
}
.garden_img_flex02{
    width: 32%;
    max-width: 305px;
}
.garden_img_flex03{
    width: 50%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.garden_img_flex03 > div{
    width: 32%;
    max-width: 152px;
}
.garden_img_flex03 .img_cap{
    right: initial;
    left:0.3em;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 2px rgba(0, 0, 0, 1));
}
.garden_img_flex03 > div:nth-of-type(n + 4){
    margin-top: 2.5%;
}

.design_item_box li{
    display:flex;
    border:1px solid #3f336b;
    background: #fff;
}
.design_item01{
    background: url(../img/design/design_item01.jpg)no-repeat;
    background-size: cover;
    background-position: left bottom;
}

.design_item02{
    background: url(../img/design/design_item02.jpg)no-repeat;
    background-size: cover;
}

.design_item03{
    background: url(../img/design/design_item03.jpg)no-repeat;
    background-size: cover;
    background-position: right center;
}

.design_item05{
    background: url(../img/design/design_item05.jpg)no-repeat;
    background-size: cover;
}

.design_item_img{
    width: 55%;
    max-width: 268px;
}
.design_item_txt{
    width:45%;
    padding: 15px;
    /* padding-bottom: 0; */
}

.door_box{
    background:linear-gradient(0deg, #6355a1, #3c3268);
    color: #fff;
}
.door_txt{
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.door_img{
    width: 30%;
}

.zeh_area{
    background: url(../img/design/zeh_area.jpg)no-repeat;
    background-size: cover;
    height: 340px;
    background-position: center top;
}

.zeh_logo_box{
    align-items: center;
}
.zeh_logo{
    width: 21%;
}
.zeh_txt{
    width: 76%;
}
.zeh_txt .loc_list_ttl{
    border-bottom: none;
}

.zeh_list{
    width: 100%;
}

.des_mt01{
    margin-top: 50px;
}
.des_mt02{
    margin-top: 20px;
}
.zeh_arrow{
    border-top: 40px solid #3f336b;
    border-right: 50px solid transparent;
    /* border-bottom: 50px solid transparent; */
    border-left: 50px solid transparent;
    margin: 0 auto;
    width: 40px;
}

.en_upper{
    text-transform: uppercase;
}

.des_ttl_cover{
    text-align: center;
}
.des_ttl_cover > div{
    display: inline-block;
}

.des_sup01{
    font-size: 0.35em;
    top: unset;
    bottom: 0;
}
.loc_list_color01{
    /* border-bottom: 2px solid #cca200; */
    /* border-image: initial; */
}

.de_font_gh01{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 600;
}

.de_cap01{
    margin-top: 10px;
    font-size: 10px;
}

.loc_list_ttl_span01{
    font-size: 0.6em !important;
    display: block !important;
}

.loc_list_ttl_span02{
    position: absolute;
    bottom: 10%;
    right: 0;
    font-size: 0.5em !important;
}

.loc_list_ttl_pd01{
    padding-bottom: 25px;
}
.img_flex{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec_cap01{
    left: 6%;
    right: initial;
    bottom: -2.5em;
}

.purple_ttl.bg01{
    background: #3f336b;
}

.bels{
    max-width: 500px;
    margin: 30px auto 0;
}

.bels_cap{
    font-size: 0.35em;
    margin-top: 5px;
}


@media screen and (max-width: 1200px) {
.loc_list_ttl {
    font-size: 16px;
}
.section_lead {
    font-size: 16px;
}
.loc_list_lead {
    font-size: 14px;
}
.loc_list_name .long {
    letter-spacing: -0.1em;
}
}




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

.loc_list_ttl {
    font-size: 15px;
}
.loc_list_lead {
    font-size: 13px;
}

.loc_list_ttl span {
    font-size: 0.9em;
}

.lazona_half{
    max-width: 480px;
    margin: 0 auto;
}
.lazona_half > div{
    width: 100%;
}

.designer_flex{
    flex-wrap: wrap;
}

.designer_img {
    width: 100%;
    text-align: center;
    margin: 10px auto 20px;
}
.designer_img > img{
    max-width: 200px;
}

.designer_txt {
    width: 100%;
}

/*  */
.designer_txt_ttl, .designer_txt_lead{
    
}

.zeh_area{
    height: 160px;
}

.plant_box{
    margin-top:20px;
}
.loc_sub_ttl02{
    height: auto;
}
.loc_list_ttl {
    font-size: 14px;
}
}


@media screen and (max-width: 768px) {
.section_lead {
    font-size: 15px;
}
.loc_list_lead {
    font-size: 12px;
}
.loc_list_ttl {
    font-size: 14px;
}

.loc_flex {
    /* margin-bottom: 40px; */
}

}


@media screen and (max-width: 760px) {
.loc_flex > .loc_list_text{
    width: 100%;
    order: 2;
}
.loc_flex > .loc_list_img{
    width: 100%;
    order: 1;
    margin-bottom: 10px;
}
.loc_list_item.loc_flex{
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.design_item_box .loc_list_item.col2{
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    min-height: 200px;
}
.design_item_box .loc_list_item.col2:nth-child(n + 2){
    margin-top: 30px;
}

.loc_list01 .loc_list_item.col3{
    width: 100%;
}

.loc_list01 .loc_list_item.col3:nth-child(n + 2) {
    margin-top: 30px;
}

.zeh_flex .loc_list_item.col3:nth-child(n + 2) {
    margin-top: 30px;
}

.zeh_flex .loc_list_item.col3{
     width: 80%;
    margin: 0 auto;
}

.list_bg01{
    min-height: initial;
}

}

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

.des_cap_rel_sp{
    position: relative;
}


.loc_list_item.col3 {
    width: 48%;
}
.loc_list_item.col3:nth-child(n + 3) {
    margin-top: 30px;
}

.loc_list_item.col4{
    width: 23%;
}
.loc_list_item.col4:nth-child(n + 3){
    margin-top: 30px;
}
.loc_list_item.col4 {
    width: 48%;
}
.loc_flex {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.loc_list_ttl {
    /* font-size: 13px; */
}
.lazona_half {
    max-width: unset!important;
}
.section_subttl {
    font-size: 16px;
}
.section_lead {
    font-size: 14px;
}

.designer_box{
    padding: 20px 10px;
}
.designer_txt_ttl, .designer_txt_lead {
    margin-left: 10px;
}
.designer_txt_ttl {
    /* margin: 20px 10px; */
    margin: 10px;
}
.designer_neme_box {
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
.designer_ttl{
    font-size: 22px;
}

.garden_img_flex{
    flex-wrap: wrap;
}
.garden_img_flex01 {
    width: 32.2%;
    max-width: initial;
}
.garden_img_flex01 img{
    object-fit: cover;
    height: 100%;
}
.garden_img_flex02 {
    width: 66%;
    max-width: initial;
}
.garden_img_flex03{
    margin-top: 2%;
    width: 100%;
}
.design_item_box li{
    flex-wrap: wrap;
}
.design_item_img {
    width: 50%;
    /* aspect-ratio: 536 / 420; */
    /* max-width: initial; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.design_item_txt {
    width: 50%;
}

.zeh_area{
    /* height: 200px; */
}
.door_txt {
    width: 100%;
}
.door_img {
    width: 100%;
}

.sec_cap01{
    left: 0;
     right: initial;
        /* margin-top: 30px; */
    bottom: -3.5em;
}

.loc_flex .zeh_list{
    width: 100%;
}
.loc_flex .zeh_list:nth-of-type(n + 2){
    margin-top: 30px;
}

.zeh_logo{
    /* border-style: solid;
    border-width: 0; */
    width: 42%;
    margin: 0 auto 30px;
}
.zeh_txt{
    width: 100%;
}
.design_item_img img{
    display: none;
}
.design_item04{
    background: url(../img/design/design_item04.jpg)no-repeat;
    background-size: 120%;
    background-position: center center;
}

.design_item06{
    background: url(../img/design/design_item06.jpg)no-repeat;
    background-size: cover;
    background-position: center;
}

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

.lazona_sec .section_lead span{
    font-size: 1em;
    letter-spacing: 0;
}
.loc_list_ttl {
    /* font-size: 12px; */
}
.loc_flex {
    margin-bottom: 30px;
}
.loc_flexz.zeh_list
{
    margin-top: 0;
}
}

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

}








/* scroll */

.scroll_flex{
    display: none;
}
.scroll_flex_p {
    padding: 10px 0;
    text-decoration: none;
    outline: none;
    font-size: 12px;
    width: 100%;
    text-align: center;
}
.scroll_l {
    position: relative;
    color: #000;
    padding: 0;
    display: inline-block;
    text-decoration: none;
    outline: none;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    /* margin-bottom: 40px; */
}
.scroll_flex .scroll_l, .scroll_flex .scroll {
    width: 48%;
    left: unset;
    right: unset;
    transform: unset;
}
.scroll {
    position: relative;
    color: #000;
    padding: 0;
    display: inline-block;
    text-decoration: none;
    outline: none;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
}
.scroll::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000;
}
.scroll::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}
.scroll::before {
    animation: arrowlong01 2s ease infinite;
}
.scroll::after {
    animation: arrowlong02 2s ease infinite;
}
@keyframes arrowlong01 {
    0% {
        width: 0;
        opacity: 0
    }
    20% {
        width: 0;
        opacity: 1
    }
    80% {
        width: 105%;
        opacity: 1
    }
    100% {
        width: 105%;
        opacity: 0
    }
}
@keyframes arrowlong02 {
    0% {
        left: 0;
        opacity: 0
    }
    20% {
        left: 0;
        opacity: 1
    }
    80% {
        left: 103%;
        opacity: 1
    }
    100% {
        left: 103%;
        opacity: 0
    }
}

/* scroll_l */
.scroll_b{
    padding: 10px 0;
    margin: 10px auto 0;
}
.scroll_l {
    position: relative;
    color: #000;
    padding: 0;
    display: inline-block;
    text-decoration: none;
    outline: none;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    /* margin-bottom: 40px; */
}
.scroll_l::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000;
}
.scroll_l::after {
    content: "";
    position: absolute;
    bottom: -4px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(-135deg);
}
.scroll_l::before {
    animation: arrowlong03 2s ease infinite;
}
.scroll_l::after {
    animation: arrowlong04 2s ease infinite;
}
@keyframes arrowlong03 {
    0% {
        right: 0;
        width: 0;
        opacity: 0
    }
    20% {
        right: 0;
        width: 0;
        opacity: 1
    }
    80% {
        right: 0;
        width: 105%;
        opacity: 1
    }
    100% {
        right: 0;
        width: 105%;
        opacity: 0
    }
}
@keyframes arrowlong04 {
    0% {
        right: 0;
        opacity: 0
    }
    20% {
        right: 0;
        opacity: 1
    }
    80% {
        right: 103%;
        opacity: 1
    }
    100% {
        right: 103%;
        opacity: 0
    }
}
@media screen and (max-width: 550px) {
    .terminal_map .scroll_flex {
        display: flex;
        justify-content: space-between;
        width: 50%;
        margin: 0px auto 0;
        flex-wrap: wrap;
    }
    .terminal_map_img{
        margin-top: 10px;
        overflow-x: scroll;
    }
    .terminal_map_img img{
        min-width: 600px;
    }
}   


@media screen and (max-width: 450px) {
    .design_item06 {
        background-size: 125%;
    }
}