:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
  --bodycolor: #fff;
  --maincolor: #040000;
  --subcolor: #8f8f8f;
  --themecolor: #000;
  --leadcolor: #4f4f4f;
  --leadcolor-: #34532a;
  --decorationcolor: #858484;
  --advancecolor: #000;
  --mobilecolor: #000;
  --brandcolor: #000;
  --buttoncolor: #000;

  --blurShadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.3);
  --blurShadow-: 0px 0px 4px rgba(0, 0, 0, .5), 0px 0px 8px rgba(0, 0, 0, 1);
  --blurShadow--: 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 6px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
  --blurShadow---: 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 6px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 1);
  --boxShadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);

  --linear:         cubic-bezier(0.250, 0.250, 0.750, 0.750);
  --easeInSine:     cubic-bezier(0.47,  0,     0.745, 0.715);
  --easeOutSine:    cubic-bezier(0.39,  0.575, 0.565, 1    );
  --easeInOutSine:  cubic-bezier(0.445, 0.05,  0.55,  0.95 );
  --easeInQuad:     cubic-bezier(0.55,  0.085, 0.68,  0.53 );
  --easeOutQuad:    cubic-bezier(0.25,  0.46,  0.45,  0.94 );
  --easeInOutQuad:  cubic-bezier(0.455, 0.03,  0.515, 0.955);
  --easeInCubic:    cubic-bezier(0.55,  0.055, 0.675, 0.19 );
  --easeOutCubic:   cubic-bezier(0.215, 0.61,  0.355, 1    );
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1    );
  --easeInQuart:    cubic-bezier(0.895, 0.03,  0.685, 0.22 );
  --easeOutQuart:   cubic-bezier(0.165, 0.84,  0.44,  1    );
  --easeInOutQuart: cubic-bezier(0.77,  0,     0.175, 1    );
  --easeInQuint:    cubic-bezier(0.755, 0.05,  0.855, 0.06 );
  --easeOutQuint:   cubic-bezier(0.23,  1,     0.32,  1    );
  --easeInOutQuint: cubic-bezier(0.86,  0,     0.07,  1    );
  --easeInExpo:     cubic-bezier(0.95,  0.05,  0.795, 0.035);
  --easeOutExpo:    cubic-bezier(0.19,  1,     0.22,  1    );
  --easeInOutExpo:  cubic-bezier(1,     0,     0,     1    );
  --easeInCirc:     cubic-bezier(0.6,   0.04,  0.98,  0.335);
  --easeOutCirc:    cubic-bezier(0.075, 0.82,  0.165, 1    );
  --easeInOutCirc:  cubic-bezier(0.785, 0.135, 0.15,  0.86 );
  --easeInBack:     cubic-bezier(0.6,  -0.28,  0.735, 0.045);
  --easeOutBack:    cubic-bezier(0.175, 0.885, 0.32,  1.275);
  --easeInOutBack:  cubic-bezier(0.68, -0.55,  0.265, 1.55 );

  --opacity: opacity .25s var(--easeInOutSine);
  --all: all .25s var(--easeInOutSine);
  --button:
    color .25s ease,
    background-color .25s ease,
    border .25s ease,
    outline .25s ease;
}

::selection {
  color: var(--maincolor);
  background-color: var(--leadcolor);
}



/*header*/
body#pageLpPoint header {
  height: 7rem;
}

/*main*/
body#pageLpPoint main {
  margin: 7rem 0 0;
  background: linear-gradient(180deg, #F2F2F2 13.8%, #C0C0C0 33.27%, #D8D8D8 58.97%, #E8E8E8 83.84%, #B3B3B3 100%);
  .com-content {
    width: 100%;
    max-width: 120rem;
  }
}

/* fv */
body#pageLpPoint section#fv {
  position: relative;
  figure {
    height: 53.7vw;
    video {
      display: block;
      margin-top: -1.8vw;
      pointer-events: none;
      user-select: none;
    }
    img.completed {
      position: absolute;
      left: 50%;
      bottom: 2rem;
      max-width: 100rem;
      transform: translateX(-50%);
    }
    figcaption {
      position: absolute;
      right: 5px;
      bottom: 5px;
      font-size: 80%;
      letter-spacing: .1rem;
      color: var(--bodycolor);
    }
  }
}

/*usp*/
body#pageLpPoint section#usp {
  #merit {
    padding: 3rem 0;
    background-color: var(--bodycolor);
  }
  #cfa {
      padding: 4rem 0;
      background: linear-gradient(180deg, #443423 27.09%, #76624C 100%);
    ol {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rem;
      li {
        position: relative;
        font-size: 160%;
        color: var(--bodycolor);
        .b {
          font-size: 120%;
        }
        .s {
          font-size: 100%;
        }
        &:nth-child(1) {
          .n {
            padding-left: .2rem;
            font-size: 160%;
            line-height: 0.6em;
          }
          &::after {
            content: "";
            position: absolute;
            right: -4rem;
            top: -2rem;
            width: 1px;
            height: calc(100% + 4rem);
            background-color: var(--bodycolor);
          }
        }
        &:nth-child(2) {
          display: flex;
          gap: 2rem;
          > div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            p {
              padding: .4rem 1rem;
              font-size: 60%;
              text-align: center;
              color: var(--maincolor);
              background-color: var(--bodycolor);
            }
          }
          p {
            .n {
              padding-left: .2rem;
              font-size: 200%;
              line-height: 0.6em;
            }
            sup {
              position: absolute;
              font-size: 50%;
            }
          }
        }
      }
    }
  }
  .information {
    padding: 4rem 0;
    h2 {
      font-size: 110%;
      font-weight: 200;
      letter-spacing: .2rem;
      line-height: 8rem;
      color: var(--leadcolor);
      text-align: center;
    }
    p {
      font-size: 333%;
      letter-spacing: .2rem;
      line-height: 6rem;
      color: var(--leadcolor-);
      text-align: center;
    }
    button {
      display: block;
      margin: 4rem auto;
      padding: 4rem 0;
      width: 50rem;
      font-size: 160%;
      letter-spacing: .3rem;
      line-height: 0;
      color: var(--bodycolor);
      text-align: center;
      background: linear-gradient(90deg, #520B0E 0%, #8A2125 100%);
      transition: var(--opacity);
      &:hover {
        opacity: .6;
      }
    }
  }

}


/* point */
body#pageLpPoint section#point {
  padding-top: 10rem;
  .p {
    position: relative;
    min-height: 500px;
    background: linear-gradient(180deg,rgba(217, 217, 217, 1) 0%, rgba(203, 203, 203, 1) 100%);
    h2 {
      position: absolute;
      left: 50%;
      top: -4rem;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      gap: 4rem;
      padding: 2rem 6rem;
      width: 70rem;
      background: conic-gradient(from 45deg at 50% 34.08%, #263920 -4.26deg, #4F5E2B 354.81deg, #263920 355.74deg, #4F5E2B 714.81deg);
      background-size: 200% 160%;
      background-position-x: 65%;
      clip-path: polygon(0 50%, 6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
      img {
        width: auto;
      }
      p {
        width: 60rem;
        font-size: 180%;
        font-weight: 400;
        line-height: 4rem;
        letter-spacing: .3rem;
        text-align: center;
        color: var(--bodycolor);
      }
    }
  }
  .p1 {
    ol {
      display: flex;
      gap: 10px;
      padding: 15rem 0 10rem;
      li {
        &:first-child {
          width: calc(45.45% - 5px);
        }
        &:last-child {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;
          width: calc(54.55% - 5px);
          > * {
            width: calc(50% - 5px);
          }
        }
        img {
          transition: var(--opacity);
          &:hover {
            opacity: .6;
          }
        }
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 4rem;
          background: linear-gradient(270deg, #FFFFFF 0%, #9C9C9C 100%);
          p {
            font-size: 2.2rem;
            line-height: 4rem;
            text-align: center;
            color: #222e04;
          }
          button {
            display: block;
            padding: 3rem;
            font-size: 100%;
            letter-spacing: .1rem;
            line-height: 0;
            color: var(--bodycolor);
            background: var(--leadcolor-);
            transition: var(--opacity);
            &:hover {
              opacity: .6;
            }
          }
        }
      }
    }
  }
  .p2 {
    > div.com-content {
      > div {
        display: flex;
        gap: 6rem;
        margin: auto;
        padding: 15rem 0 4rem;
        width: 100rem;
        figure {
          position: relative;
          width: 55%;
          figcaption {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: .4rem .8rem;
            font-size: 80%;
            letter-spacing: .1rem;
            line-height: 1.5rem;
            color: var(--bodycolor);
            background-color: var(--maincolor);
          }
        }
        > div {
          display: flex;
          flex-direction: column;
          gap: 2rem;
          align-items: center;
          justify-content: center;
          position: relative;
          padding: 0 4rem;
          width: calc(45% - 6rem);
          color: var(--leadcolor-);
          text-align: center;
          .headcopy {
            font-size: 2.5rem;
            line-height: 4rem;
          }
          .bodycopy {
            padding: 0 1.8rem;
            font-size: 1.5rem;
            line-height: 3rem;
            letter-spacing: 0;
            text-align: justify;
          }
          .lb {
            position: absolute;
            left: 0;
            top: 3rem;
            width: 2rem;
            height: calc(100% - 6rem);
            border-left: var(--leadcolor-) solid 1px;
            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: -2rem;
              width: 1px;
              height: 2rem;
              transform: rotate(45deg);
              transform-origin: left bottom;
              background-color: var(--leadcolor-);
            }
            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: -2rem;
              width: 1px;
              height: 2rem;
              transform: rotate(-45deg);
              transform-origin: left top;
              background-color: var(--leadcolor-);
            }
          }
          .rb {
            position: absolute;
            right: 0;
            top: 3rem;
            width: 2rem;
            height: calc(100% - 6rem);
            border-right: var(--leadcolor-) solid 1px;
            &::before {
              content: "";
              position: absolute;
              right: 0;
              top: -2rem;
              width: 1px;
              height: 2rem;
              transform: rotate(-45deg);
              transform-origin: right bottom;
              background-color: var(--leadcolor-);
            }
            &::after {
              content: "";
              position: absolute;
              right: 0;
              bottom: -2rem;
              width: 1px;
              height: 2rem;
              transform: rotate(45deg);
              transform-origin: right top;
              background-color: var(--leadcolor-);
            }
          }
        }
      }
      > figure {
        margin: auto;
        padding: 0 0 10rem;
        width: 100rem;
        figcaption {
          margin-top: .5rem;
          font-size: 80%;
          letter-spacing: .1rem;
          line-height: 1.5rem;
        }
      }
    }
  }
  .p3 {
    .p {
      background: linear-gradient(180deg,rgba(217, 217, 217, 1) 0%, rgba(203, 203, 203, 0) 100%);
    }
    ol {
      display: flex;
      flex-wrap: wrap;
      gap: 4rem;
      padding: 15rem 0 10rem 0;
      li {
        &:nth-child(1) {
          position: relative;
          width: calc(40% - 2rem);
          figure {
            position: absolute;
            &:nth-child(1) {
              right: 0;
              bottom: -5rem;
              z-index: 1;
              width: 48%;
            }
            &:nth-child(2) {
              left: -3rem;
              bottom: -14rem;
              width: 64%;
            }
          }
        }
        &:nth-child(2) {
          width: calc(60% - 2rem);
          figure {
            width: 105%;
          }
        }
        &:nth-child(3) {
          display: flex;
          gap: 4rem;
          margin-top: 6rem;
          padding: 0 15rem 0 30rem;
          width: 100%;
          figure {
            width: 100rem;
          }
        }
        figure {
          position: relative;
          figcaption {
            position: absolute;
            right: 0;
            bottom: 0;
            padding: .4rem .8rem;
            font-size: 80%;
            letter-spacing: .1rem;
            line-height: 1.5rem;
            color: var(--bodycolor);
            background-color: var(--maincolor);
          }
        }
        p {
          font-size: 1.5rem;
          line-height: 3rem;
          letter-spacing: 0;
          text-align: justify;
        }
      }
    }
  }
}

/*cfa*/
body#pageLpPoint section#cfa {
  .information {
    margin: auto;
    padding: 4rem 0 6rem;
    width: 100rem;
    background: #34532a;
    h2 {
      font-size: 110%;
      font-weight: 200;
      letter-spacing: .2rem;
      line-height: 8rem;
      color: var(--bodycolor);
      text-align: center;
    }
    p {
      font-size: 333%;
      letter-spacing: .2rem;
      line-height: 6rem;
      color: var(--bodycolor);
      text-align: center;
    }
    button {
      display: block;
      margin: 4rem auto 8rem;
      padding: 4rem 0;
      width: 50rem;
      font-size: 160%;
      letter-spacing: .3rem;
      line-height: 0;
      color: var(--bodycolor);
      text-align: center;
      background: linear-gradient(90deg, #520B0E 0%, #8A2125 100%);
      transition: var(--opacity);
      &:hover {
        opacity: .6;
      }
    }
    ol {
      display: flex;
      justify-content: center;
      gap: 3rem;
      li {
        width: 30%;
      }
    }
    .annotation {
      margin: 3rem auto 0;
      width: fit-content;
      font-size: 80%;
      letter-spacing: .1rem;
      line-height: 1.5rem;
      color: var(--bodycolor);
      span {
        display: block;
        &.l3 {
          text-indent: -2.8em;
          padding-left: 2.8em;
        }
      }
    }
  }
}

section.com-sec-note {
  border: none;
  .com-note {
    span {
      display: block;
      &.l2 {
        text-indent: -2em;
        padding-left: 2em;
      }
      &.l1 {
        text-indent: -1em;
        padding-left: 1em;
      }
    }
  }
}





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

  /*header*/
  body#pageLpPoint header {
    height: 60px;
    .header-wrap {
      padding: 10px;
    }
  }

  /*main*/
  body#pageLpPoint main {
    margin: 60px 0 0;
  }
  
  /*fv*/
  body#pageLpPoint section#fv {
    figure {
      height: 54.4vw;
      img.completed {
        bottom: 3rem;
        max-width: 90%;
      }
      figcaption {
        font-size: 100%;
      }
    }
  }


  /*usp*/
  body#pageLpPoint section#usp {
    #cfa {
      padding: 3rem 0;
      ol {
        flex-direction: column;
        gap: 4rem;
        li {
          width: 100%;
          font-size: 200%;
          &:nth-child(1) {
            text-align: center;
            &::after {
              left: 0;
              bottom: -2rem;
              right: unset;
              top: unset;
              width: 100%;
              height: 1px;
            }
          }
        }
      }
    }
    .information {
      h2 {
        font-size: 200%;
      }
    }
  }

  /*point*/
  body#pageLpPoint section#point {
    .p {
      h2 {
        gap: 2rem;
        img {
          width: 35%;
        }
        p {
          font-size: 160%;
        }
      }
    }
    .p1 {
      ol {
        flex-direction: column;
        li {
          &:first-child,
          &:last-child {
            width: 100%;
          }
          div {
            p {
              font-size: 2.8rem;
            }
            button {
              font-size: 120%;
            }
          }
        }
      }
    }
    .p2 {
      > div.com-content {
        > div {
          flex-direction: column;
          width: 100%;
          figure {
            width: 100%;
            figcaption {
              font-size: 100%;
            }
          }
          div {
            width: 100%;
            .headcopy {
              font-size: 3rem;
              line-height: 5rem;
            }
            .bodycopy {
              font-size: 2.4rem;
            }
            .lb,
            .rb {
              height: -webkit-fill-available;
            }
          }
        }
        > figure {
          width: 100%;
          figcaption {
            margin-top: 1rem;
            font-size: 100%;
          }
        }
      }
    }
    .p3 {
      ol {
        gap: 2rem;
        padding: 16rem 0 10rem 0;
        li {
          &:nth-child(1) {
            display: flex;
            width: 100%;
            order: 2;
            figure {
              position: relative;
              &:nth-child(1) {
                right: unset;
                bottom: unset;
                width: 33%;
              }
              &:nth-child(2) {
                left: unset;
                bottom: unset;
                width: 70%;
              }
              figcaption {
                font-size: 100%;
              }
            }
          }
          &:nth-child(2) {
            width: 100%;
            figure {
              width: 100%;
              figcaption {
                font-size: 100%;
              }
            }
            order: 1;
          }
          &:nth-child(3) {
            flex-direction: column;
            margin-top: unset;
            padding: unset;
            width: 100%;
            order: 3;
            figure {
              width: 100%;
              figcaption {
                font-size: 100%;
              }
            }
          }
          p {
            font-size: 2.5rem;
            line-height: 4rem;
          }
        }
      }
    }
  }

  /*cfa*/
  body#pageLpPoint section#cfa {
    .information {
      margin-left: -4rem;
      width: calc(100% + 8rem);
      h2 {
        font-size: 200%;
      }
      button {
        margin: 4rem auto 6rem;
      }
      ol {
        li {
          width: 40%;
        }
      }
      .annotation {
        width: calc(100% - 8rem);
        font-size: 120%;
        line-height: 2.2rem;
      }
    }
  }

}