body#plan section#fv {
  background-color: var(--expcolor);
}

body#plan section#cfa {
  background-color: var(--expcolor);
}
section#planNav{
  color: var(--bodycolor);
  ol {
    li {
      position: relative;
      .box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-40%);
        z-index: 1;
        padding: 2rem;
        min-width: 40%;
        height: 90%;
        background-color: var(--bodycolor);
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        transition: var(--all);
        &.vis {
          opacity: 1;
          pointer-events: all;
          transform: translateX(-50%) translateY(-50%);
        }
        .close {
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 20px;
          height: 20px;
          font-size: 1.8rem;
          line-height: 0;
          color: var(--bodycolor);
          background-color: var(--subcolor);
        }
        .name {
          display: inline-flex;
          align-items: center;
          padding: .2rem 1rem;
          width: fit-content;
          font-family: 'Cormorant Garamond', serif;
          font-size: 1.5rem;
          letter-spacing: .1rem;
          color: var(--bodycolor);
          background-color: var(--subcolor);
          pointer-events: none;
          large {
            font-size: 200%;
          }
        }
        .type {
          position: relative;
          z-index: -1;
          margin: -1rem auto 0;
          width: auto;
          pointer-events: none;
        }
        .direction {
          margin-top: .5rem;
          margin-left: calc(100% - 4rem);
          width: 10%;
        }
      }
      .btn {
        display: none;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        padding: 1rem 2rem;
        background-color: rgb(0 0 0 / 66%);
        cursor: pointer;
        &.vis {
          display: block;
        }
        .type {
          display: flex;
          align-items: center;
          font-family: 'Cormorant Garamond', serif;
          font-size: 2rem;
          letter-spacing: .1rem;
          pointer-events: none;
          span {
            font-size: 200%;
          }
        }
        .more {
          display: flex;
          align-items: center;
          font-size: 1.8rem;
          color: var(--bodycolor);
          pointer-events: none;
          .ar {
            position: relative;
            left: 0;
            display: inline-block;
            margin-top: .5rem;
            margin-left: 1rem;
            width: 20rem;
            height: 1px;
            background-color: var(--bodycolor);
            transition: var(--all);
            &::before {
              position: absolute;
              right: 0;
              content: "";
              width: 2rem;
              height: 1px;
              background-color: var(--bodycolor);
              transform-origin: right;
              transition: var(--all);
              transform: rotate(40deg);
            }
          }
        }
        &:hover {
          .more {
            .ar {
              left: 1rem;
            }
          }
        }
      }
      &.a {
        .box {
          .type {
            /*2857*/
            height: calc(60% * 1.425);
          }
        }
      }
      &.d {
        .box {
          .type {
            /*2485*/
            height: calc(60% * 1.2425);
          }
        }
      }
      &.f {
        .box {
          .type {
            /*2972*/
            height: calc(60% * 1.486);
          }
        }
      }
      &.h {
        .box {
          .type {
            /*1779*/
            height: calc(60% * .8895);
          }
        }
      }
      &.i {
        .box {
          .type {
            /*4407*/
            height: calc(90% - 1rem);
          }
        }
      }
    }
  }
}

section#typeNav{
  padding: 10rem 0 15rem;
  background-color: var(--expcolor);
  ol {
    display: flex;
    justify-content: center;
    gap: 20px;
    li {
      display: block;
      background-color: var(--bodycolor);
      a {
        transition: var(--all);
        &:hover {
          opacity: .6;
        }
      }
    }
  }
}



@media all and (min-width: 769px) and (max-width: 1000px) {

}



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

  section#planNav{
    ol {
      li {
        .box {
          top: calc(50% - 1rem);
          &.vis {
          }
          .close {
          }
          .name {
            margin-top: -2rem;
            margin-left: -2rem;
            font-size: 1rem;
            large {
            }
          }
          .type {
          }
          .direction {
          }
        }
        .btn {
          &.vis {
            display: block;
          }
          .type {
            span {
            }
          }
          .more {
            .ar {
              width: 10rem;
              &::before {
              }
            }
          }
        }
        &.a {
          .box {
            .type {
              /*2857*/
              height: calc(60% * 1.425);
            }
          }
        }
        &.d {
          .box {
            .type {
              /*2485*/
              height: calc(60% * 1.2425);
            }
          }
        }
        &.f {
          .box {
            .type {
              /*2972*/
              height: calc(60% * 1.486);
            }
          }
        }
        &.h {
          .box {
            .type {
              /*1779*/
              height: calc(60% * .8895);
            }
          }
        }
        &.i {
          .box {
            .type {
              /*4407*/
              height: calc(90% - 1rem);
            }
          }
        }
      }
    }
  }

  section#typeNav{
    padding: 5rem 0 8rem;
    ol {
      flex-wrap: wrap;
      li {
        width: calc(50% - 10px);
        a {
        }
      }
    }
  }

}