/* fv */
body#design section.fv figure picture {
  align-items: flex-end;
}
section.fv figure figcaption {
  padding: .2rem;
  background-color: rgba(0,0,0,.6);
}
/* usp */
section.usp {
  /* padding: 0; */
}

section.usp figure.facade {
  margin: 2rem auto 0;
  width: 80%;
}
section.usp figure.exterior {
  margin: 2rem auto 0;
  width: calc(100% - 10px);
}
section.usp figure.facade figcaption,
section.usp figure.exterior figcaption {
  position: relative;
  right: unset;
  bottom: unset;;
  margin-top: .5rem;
  text-align: right;
}


/* planning */
section.planning {
  padding: 2rem 0 4rem;
  overflow: hidden;
}
section.planning figure.material {
  margin: auto;
  width: 80%;
}
section.planning figure.material figcaption {
  color: var(--bodycolor);
}
section.planning div.border-tl {

}
section.planning div.border-tl::before,
section.planning div.border-tl::after {
  height: 120%;
}
section.planning .headcopy {
  margin-top: 2rem;
  padding-top: 2rem;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  line-height: 1.5em;
  text-align: center;
}
section.planning .bodycopy {
  margin-top: 2rem;
  font-size: 1rem;
  line-height: 2em;
  text-align: center;
}

section.planning figure.facade {
  margin-top: 4rem;
}
section.planning figure.facade figcaption {
  position: relative;
  right: unset;
  bottom: unset;;
  margin-top: .2rem;
  text-align: right;
}

section.planning .victor {
  margin: 4rem auto;
  padding: 20px;
  background-color: var(--themecolor);
}
section.planning .victor .title {
  padding: .5rem 0;
  font-size: 1.2rem;
  color: var(--leadcolor);
  text-align: center;
  background-color: var(--bodycolor);
}
section.planning .victor > div {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 1rem;
}
section.planning .victor > div img {
  width: 30%;
}
section.planning .victor > div > div {
  width: calc(70% - 20px);
}
section.planning .victor > div > div .company {
  font-size: 1.2rem;
}
section.planning .victor > div > div .post {
  margin-top: .2rem;
  font-size: .8rem;
}
section.planning .victor > div > div .name {
  margin-top: .2rem;
  font-size: 1.2rem;
}
section.planning .victor > div > div .explanation {
  margin-top: .6rem;
  font-size: .8rem;
  line-height: 1.5em;
  letter-spacing: .1rem;
}

/* landscape */
section.landscape {
  
}
section.landscape .entrance figure figcaption,
section.landscape .hall figure figcaption,
section.landscape .rounge figure figcaption {
  color: var(--bodycolor);
}
section.landscape .entrance .explanation,
section.landscape .windbreak .explanation,
section.landscape .hall .explanation,
section.landscape .rounge .explanation {
  padding: .2rem 0;
  font-size: 1.3rem;
  color: var(--bodycolor);
  text-align: center;
  background-color: var(--leadcolor);
}
section.landscape .container {
  max-width: 800px;
}
section.landscape .container .headcopy {
  margin-top: 4rem;
  font-size: 1.4rem;
  letter-spacing: .2rem;
  line-height: 1.5em;
}
section.landscape .container .bodycopy {
  margin-top: 1rem;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.8em;
}
section.landscape .container > div.floormap {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-end;
  margin-top: 40px;
}
section.landscape .container > div.floormap > figure {
  width: calc(60% - 10px);
}
section.landscape .container > div.floormap > ol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(40% - 10px);
  color: var(--bodycolor);
}
section.landscape .container > div.floormap > ol li figure figcaption {
}
section.landscape .container > div.floormap > ol li div {
  padding: .8rem;
  background-color: var(--themecolor-);
}
section.landscape .container > div.floormap > ol li div .name {
  font-size: 1.2rem;
}
section.landscape .container > div.floormap > ol li div .explanation {
  margin-top: .5rem;
  font-size: .8rem;
  line-height: 1rem;
}
section.landscape .container > div.floormap > ol li div .explanation span {
  font-size: 80%;
}

section.landscape .container > div.explanation {

}
section.landscape .container > div.explanation .headcopy {
  
}
section.landscape .container > div.explanation .annotation {
  margin-top: .2rem;
  font-size: .8rem;
}
section.landscape .container > div.explanation ol {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: calc(1em + 20px);
  margin-top: 2rem;
}
section.landscape .container > div.explanation ol li {
  position: relative;
  padding: 1rem 0;
  width: calc(50% - 10px);
  font-size: 1.2rem;
  letter-spacing: 0;
  color: var(--bodycolor);
  text-align: center;
  background-color: var(--themecolor-);
  outline: var(--bodycolor) solid 1px;
  outline-offset: -.3rem;
}
section.landscape .container > div.explanation ol li span {
  position: absolute;
  right: 0;
  bottom: -1.2rem;
  font-size: .8rem;
  color: var(--maincolor);
}


section.landscape .windbreak {
  margin-top: 4rem;
}

section.landscape .rounge {
  margin-bottom: 4rem;
}


@media all and (max-width: 768px) {
  
  section.usp {
    padding: 0 0 2rem;
  }
  section.usp figure {
    margin-top: -2rem;
  }

  section.usp figure.facade,
  section.usp figure.exterior {
    margin: 1rem auto 0;
  }

  section.planning {
    padding: 0 0 2rem;
  }
  section.planning .headcopy {
    padding-top: unset;
    font-size: 1.2rem;
  }
  section.planning .bodycopy {
    margin-top: 1rem;
    font-size: .9rem;
    letter-spacing: 0;
    line-height: 1.8em;
    text-align: justify;
  }

  section.planning .victor .title {
    font-size: 1rem;
  }
  section.planning .victor > div {
    flex-direction: column;
  }
  section.planning .victor > div img,
  section.planning .victor > div > div {
    width: 100%;
  }

  section.landscape .entrance .explanation,
  section.landscape .windbreak .explanation,
  section.landscape .hall .explanation,
  section.landscape .rounge .explanation {
    font-size: .8rem;
    letter-spacing: 0;
    line-height: 1.5rem;
  }

  section.landscape .container .headcopy {
    margin-top: 2rem;
    font-size: 1.2rem;
  }
  section.landscape .container .bodycopy {
    font-size: .75rem;
  }
  section.landscape .container > div.floormap {
    margin-top: 2rem;
    flex-direction: column;
    align-items: unset;
  }
  section.landscape .container > div.floormap > ol {
    width: 100%;
  }
  section.landscape .container > div.floormap > ol li {
  }
  section.landscape .container > div.floormap > figure {
    width: 100%;
  }
  section.landscape .container > div.floormap > ol li div .explanation span {
    display: block;
  }
  
  section.landscape .container > div.explanation {
    
  }
  section.landscape .container > div.explanation ol {
    row-gap: calc(.2em + 20px);
  }
  section.landscape .container > div.explanation ol li {
    width: 100%;
  }
  section.landscape .container > div.explanation ol li span {
    bottom: -1rem;
    font-size: .65rem;
  }




}