/* fv */
body#\0031 floor.type section.fv {
  height: calc(25vh + 1px);
  background-color: var(--leadcolor);
  border-bottom: var(--themecolor) solid 1px;
}
body#\0031 floor.type section.fv figure {
  height: 10vh;
}
body#\0031 floor section.fv figure figcaption {
}
body#\0031 floor section.fv h1 span.s {
  font-family: serif;
  font-size: 70%;
  letter-spacing: .1rem;
}


/* planning */
section.planning {
  margin: 4rem auto;
}
section.planning h1 {
  font-family: "perpetua_l";
  font-size: 1.8rem;
  letter-spacing: .2rem;
  color: var(--leadcolor);
  text-align: center;
}
section.planning .type {
  margin-top: 2rem;
  padding: 1rem;
}
section.planning .type figcaption {
  margin-top: .5rem;
  position: relative;
}
section.planning .type .usageguide {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: flex-start; */
  align-items: center;
  margin-top: 1rem;
  font-size: .7rem;
  text-align: left;
}
section.planning .type .usageguide img {
  padding-right: .5rem;
  width: unset;
  height: 1em;
}
section.planning .type .usageguide .annotation {
  display: block;
  width: 100%;
  margin-top: .4rem;
  font-size: .7rem;
}

section.planning .merit {
  margin: 2rem auto;
}
section.planning .merit h2 {
  padding: .5rem 1rem;
  font-size: 1.2rem;
  line-height: 1.5em;
  letter-spacing: .2rem;
  color: var(--bodycolor);
  text-align: center;
  background-color: var(--leadcolor);
}
section.planning .merit ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 9px;
}
section.planning .merit ol li {
  width: calc(50% - 5px);
}
section.planning .merit ol li figure {

}
section.planning .merit ol li figure figcaption {
  position: relative;
  right: unset;
  bottom: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 0;
  height: 3rem;
  font-size: .8rem;
  line-height: 1.2rem;
  text-align: center;
  background-color: var(--leadcolor----);
}

section.planning .merit .annotation {
  position: relative;
  margin-top: .2rem;
  font-size: .6rem;
}
section.planning .merit .annotation span {
  position: absolute;
}
section.planning .merit .annotation span:nth-child(1) {
  left: 0;
}
section.planning .merit .annotation span:nth-child(2) {
  right: 0;
}

/* buttons */
section.buttons {
  margin: 8rem auto;
}
section.buttons h1 {
  margin-top: 4rem;
  text-align: center;
}
section.buttons h2 {
  margin-top: .5rem;
  padding: 10px 0;
  color: var(--bodycolor);
  text-align: center;
}
section.buttons h2 span {
  display: block;
  padding: 10px 0;
}
section.buttons .garden h1 {
  color: #98ac8e;
}
section.buttons .garden h2 {
  border-top: #98ac8e solid 4px;
  border-bottom: #98ac8e solid 4px;
}
section.buttons .garden h2 span {
  background-color: #98ac8e;
}
section.buttons .grand h1 {
  color: #ae9f68;
}
section.buttons .grand h2 {
  border-top: #ae9f68 solid 4px;
  border-bottom: #ae9f68 solid 4px;
}
section.buttons .grand h2 span {
  background-color: #ae9f68;
}

section.buttons ol {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: flex-start;
  margin-top: 2rem;
}
section.buttons ol li {
  width: calc(33.33% - 20px);
  box-shadow: var(--blurShadow);
  transition: var(--button);
}
section.buttons ol li:hover {
  opacity: .6;
}
section.buttons .annotation {
  margin: 1rem 0 6rem;
  font-size: .6rem;
  text-align: right;
}



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

  /* planning */
  section.planning {
    margin: 2rem auto;
  }
  section.planning .type {
    padding: unset;
  }
  section.planning .type .usageguide {
    font-size: .6rem;
  }
  section.planning .type .usageguide .annotation {
    margin-top: .2rem;
    font-size: .6rem;
  }

  section.planning .merit {

  }
  section.planning .merit h2 {
    font-size: 1rem;
    letter-spacing: 0;
  }
  section.planning .merit ol {

  }
  section.planning .merit ol li {
    width: calc(50% - 5px);
  }
  section.planning .merit .annotation {
    letter-spacing: 0;
  }

  /* buttons */
  section.buttons {
    margin: 2rem auto;
  }
  section.buttons h1 {
    font-size: 1rem;
  }
  section.buttons h2 {
    padding: 5px 0;
    font-size: 1rem;
  }
  section.buttons .garden h2 {
    border-top: #98ac8e solid 2px;
    border-bottom: #98ac8e solid 2px;
  }
  section.buttons .grand h2 {
    border-top: #ae9f68 solid 2px;
    border-bottom: #ae9f68 solid 2px;
  }

  section.buttons ol {
    column-gap: 10px;
    row-gap: 30px;
    margin-top: 1rem;
  }
  section.buttons ol li {
    width: calc(50% - 10px);
  }

  section.buttons .annotation {
    margin: 1rem .5rem 2rem;
  }
}