@charset "UTF-8";
header {
  color: #fff;
}
.rela {
position: relative;
}
/* パンくず */
#bread_List {
  padding: 10px;
  font-size: 12px;
  box-sizing: border-box;
}

#bread_List li {
  position: relative;
  margin-right: 2em;
  color: #4f4f4f;
}

#bread_List li:not(:last-child)::after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  right: -1.3em;
  width: 0.6em;
  height: 0.6em;
  border: 1px solid #4f4f4f;
  border-left: transparent;
  border-bottom: transparent;
  transform: translateY(-70%) rotate(45deg);
}

#bread_List a {
  display: block;
  padding-bottom: 2px;
  border-bottom: 1px solid #4f4f4f;
  transition: .3s;
}

#bread_List a:hover {
  border-bottom: 1px solid transparent;
}

#bread_List li>p {
  display: block;
  padding-bottom: 2px;
}


/* 共通部分 */

#main_Img {
  width: 100%;
  /* padding: 11em 0 5%; */
  padding: 320px 0;
  /* background-image: linear-gradient(to right bottom, #dbcdc3, #f8f2ee, #dbcdc3); */
  background: url(../img/mv.jpg)  center;
  background-size: cover;
  text-align: center;
}

#main_Img h2 {
  font-size: min(4.5vw, 24px);
  line-height: 1.2;
  letter-spacing: 0.5em;
  /* color: #002938; */
  color: #fff;
}

#main_Img span {
  font-size: 13px;
  letter-spacing: 0.5em;
}


/*共通設定*/
.des_Area {
  position: relative;
  z-index: 1;
  padding: 50px 0 0;
  width: 100%;
  margin: 0 auto;
    overflow: hidden;
}

.brand_logo {
    width: 300px;
    max-width: 80%;
    margin: 0 auto 70px;
}
.brand_copy {
    width: 1000px;
    max-width: 90%;
    margin: 0 auto 100px;
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #002938;
}
.brand_copy h4 {
    font-size: 25px;
    line-height: 2;
    margin-left: 30px;
}
.brand_copy p {
    line-height: 3;
    font-size: 15px;
}

.big_copy {
    color: #fff;
    font-size: min(2.7vw,25px);
    line-height: 2;
    letter-spacing: 0.1em;
    font-weight: 200;
    position: relative;
    z-index: 1;
}

.brand_box01 {
    width: 100%;
    background: #323232;
    position: relative;
}
.brand_box01 figure {
    width: 70%;
    max-width: 1200px;
    margin: 0 0 0 auto;
}
.brand_box01 .txt {
    position: absolute;
    left: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    max-width: 90%;
    display: flex;
    justify-content: center;
    z-index: 1;
}
.brand_box01 .txt p {
    color: #fff;
}


.brand_box02 {
    width: 100%;
    background: #002938;
    position: relative;
}
.brand_box02 figure {
    width: 70%;
    max-width: 900px;
    margin: 0 auto 0 0;
}
.brand_box02 .txt {
    position: absolute;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    display: flex;
    justify-content: center;
}
.brand_box02 .txt p {
    color: #fff;
}
.brand_box02 .txt span {
    background: #002938;
    padding: 5px 10px;
}


.brand_box03 {}
.brand_box03 h5 {
    font-size: 20px;
    color: #002938;
    padding: 80px 0 20px;
    text-align: center;
    letter-spacing: 0.3em;
    font-family: "Cormorant Garamond", serif;
}
.brand_box03 h4.big_copy {
    color: #846a24;
    text-align: center;
    margin: 50px auto 20px;
}
.brand_box03 p {
    text-align: center;
    line-height: 2;
    color: #002938;
}
.brand_box03 h5.green {
    color: #846a24;
}
.brand_box03 .tree {
    width: 1000px;
    max-width: 90%;
    margin: 40px auto 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f4f0ea;
}
.brand_box03 .tree li {
    width: calc( 100% / 5 - 4%);
    mix-blend-mode: multiply;
}
.brand_box03 .tree li figure {
    padding-bottom: 20px;
    border-bottom: 1px solid #002938;
    position: relative;
}
.brand_box03 .tree li figure img {
    mix-blend-mode: multiply;
}
.brand_box03 .tree li p {
    text-align: center;
    color: #002938;
    font-size: 14px;
    padding-top: 5px;
}
.brand_box03 .material {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1000px;
    max-width: 90%;
    margin: 10px auto 100px;
    align-items: center;
}
.brand_box03 .material li {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.brand_box03 .material li h4.big_copy {
    text-align: left;
    font-size: 20px;
    margin-bottom: 0;
    color: #002938;
}


.lounge {
    width: 100%;
    background: #002938;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}
.lounge .img {
    width: 50%;
}
.lounge .txt {
    width: 50%;
    display: flex;
    justify-content: center;
    color: #fff;
}
.lounge h5 {
    font-family: "Cormorant Garamond", serif;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: 0.2em;
}
.lounge h4.big_copy {
    color: #d6b8a6;
    margin-bottom: 30px;
}
.lounge p {
    line-height: 2.5;
}


.facade {
    text-align: center;
    padding: 80px 0;
    background: #f2eae7;
}
.facade h5 {
    font-family: "Cormorant Garamond", serif;
    color: #002938;
    margin-bottom: 30px;
    letter-spacing: 0.2em;
}
.facade h4.big_copy {
    color: #a56a5e;
    margin-bottom: 30px;
}
.facade p {
    line-height: 2.5;
    color: #002938;
}
.facade .facade_img {
    width: 700px;
    max-width: 90%;
    margin: 0px auto 50px;
    mix-blend-mode: darken;
}
.facade .designer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 1000px;
    max-width: 90%;
    margin: 10px auto 100px;
    align-items: center;
}
.facade .designer li {
    width: 48%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.facade .designer h5 {
    text-align: left;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid  #002938;
}
.facade .designer li p {
    text-align: left;
    font-size: 14px;
}
.facade .designer li figure {
    width: 280px;
    max-width: 80%;
    margin-top: 20px;
}




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

  #main_Img {
    padding: 100px 0 50px;
  }
  #main_Img span {
    font-size: 12px;
    display: block;
    padding-top: 20px;
    line-height: 1.6;
}

  /* パンくず */
  #bread_List {
    display: none;
  }
  
  
    
  .des_Area {
    padding: 50px 0 0;
  }
    .brand_logo {
        width: 180px;
        max-width: 70%;
        margin-bottom: 30px;
    }
    .brand_copy {
        writing-mode: horizontal-tb;
    }
    .brand_copy h4 {
        margin-left: 0;
        font-size: 20px;
        text-align:center;
        margin-bottom: 20px;
    }
    .brand_copy p {
        text-align: center;
        font-size: 15px;
        line-height: 2;
    }
    .brand_box01 .txt {
        position: relative;
        top: inherit;
        transform: none;
        padding: 40px 0 0;
        width: 100%;
        font-size: 20px;
    }
    .brand_box01 .txt .big_copy {
        font-size: 18px;
    }
    .brand_box01 figure {
        width: 100%;
        margin: 0 auto;
    }
    .brand_box02 figure {
        width: 100%;
    }
    .brand_box02 .txt {
        right: 20px;
        top: 20px;
        writing-mode: vertical-rl;
        line-height: 1.5;
        transform: none;
        width: 100%;
        font-size: 20px;
    }
    .brand_box02 .txt h4.big_copy {
        font-size: 16px;
    }
    .brand_box02 .txt span {
        padding: 5px 2px;
    }
    
    .big_copy {
        font-size: 18px;
    }
    
    .brand_box03 p {
        font-size: 15px;
    }
    .brand_box03 .tree li {
        width: calc( 100% / 3 - 4%);
    }
    .brand_box03 .tree {
        justify-content: space-evenly;
    }
    .brand_box03 .material {
        margin-bottom: 50px;
    }
    .brand_box03 .material li {
        width: 100%;
    }
    .brand_box03 .material li h4.big_copy {
        margin: 20px auto;
        text-align: center;
        font-size: 16px;
    }
    
    .lounge .img {
        width: 100%;
        margin-bottom: 30px;
    }
    .lounge .txt {
        text-align: center;
        width: 90%;
        margin: 0 auto 50px;
    }
    .lounge h4.big_copy {
        margin-bottom: 10px;
    }
    .lounge p {
        font-size: 15px;
    }
    .facade {
        padding-bottom: 1px;
    }
    .facade .designer {
        margin-bottom: 50px;
    }
    .facade p {
        font-size: 15px;
    }
    .facade .facade_img {
        max-width: 100%;
        margin-bottom: 30px;
    }
    .facade .designer li {
        width: 100%;
        margin-bottom: 20px;
    }
    
    
    
    


}