/* -----------------------
    secret
  ----------------------- */
  .secret {
    position: relative;
    background: url(../img/secret_bg.png) no-repeat top center / 100%, #CDE2E1;
  }

  .secret .secret_ttl {
    position: absolute;
    top: 0;
    z-index: 1;
  }

  .secret .secret_sub {
    position: absolute;
    top: min(calc(135 / 960 * 100vw), 135px);
    left: min(calc(83 / 960 * 100vw), 83px);
    width: min(calc(128 / 960 * 100vw), 128px);
  }

  .secret .secret_line {
    position: absolute;
    top: min(calc(276 / 960 * 100vw), 276px);
    left: 53%;
    transform: translateX(-50%);
    width: min(calc(657 / 960 * 100vw), 657px);
  }

  .secret .secret_video {
    position: relative;
    background: url(../img/secret_v_bg.png) no-repeat center center/ 100%;
    z-index: 1;
  }

  .secret .secret_video video {
    position: absolute;
    width: min(calc(711 / 960 * 100vw), 711px);
    height: min(calc(1076 / 960 * 100vw), 1076px);
    top: min(calc(50 / 960 * 100vw), 50px);
    transform: translateX(-50%);
    left: 50%;
    object-fit: cover;
    z-index: -1;
  }

  .secret_txt {
    position: absolute;
    top: min(calc(140 / 960 * 100vw), 140px);
    right: min(calc(204 / 960 * 100vw), 204px);
    width: min(calc(76 / 960 * 100vw), 76px);
    z-index: 1;
  }

  .secret_graph {
    position: relative;
  }

  .secret .secret_long_g {
    position: absolute;
    bottom: min(calc(90 / 960 * 100vw), 90px);
    right: min(calc(198 / 960 * 100vw), 198px);
    width: min(calc(276 / 960 * 100vw), 276px);
  }

  .secret .secret_g_num {
    position: absolute;
    bottom: min(calc(202 / 960 * 100vw), 202px);
    right: min(calc(224 / 960 * 100vw), 224px);
    width: min(calc(221 / 960 * 100vw), 221px);
  }

  .secret .scrt_02_num01,
  .secret .scrt_02_num02 {
    position: absolute;
    top: min(calc(87 / 960 * 100vw), 87px);
    left: min(calc(220 / 960 * 100vw), 220px);
    width: min(calc(223 / 960 * 100vw), 223px);
  }

  .secret .scrt_02_num02{
    top: min(calc(248 / 960 * 100vw), 248px);
    width: min(calc(213 / 960 * 100vw), 213px);
  }

  .secret .scrt_02_num03,
  .secret .scrt_02_num04 {
    position: absolute;
    top: min(calc(92 / 960 * 100vw), 92px);
    right: min(calc(160 / 960 * 100vw), 160px);
    width: min(calc(223 / 960 * 100vw), 223px);
  }
  
  .secret .scrt_02_num04{
    position: absolute;
    top: min(calc(248 / 960 * 100vw), 248px);
    width: min(calc(223 / 960 * 100vw), 223px);
  }

  .secret_up {
    position: absolute;
    top: min(calc(118 / 960 * 100vw), 118px);
    left: min(calc(57 / 960 * 100vw), 57px);
    width: min(calc(259 / 960 * 100vw), 259px);
  }

  .secret_circle {
    position: absolute;
    top: min(calc(226 / 960 * 100vw), 226px);
    right: min(calc(72 / 960 * 100vw), 72px);
    width: min(calc(196 / 960 * 100vw), 196px);
  }

  .secret_arrow {
    position: absolute;
    top: min(calc(240 / 960 * 100vw), 240px);
    left: min(calc(291 / 960 * 100vw), 291px);
    width: min(calc(175 / 960 * 100vw), 175px);
  }

  .secret_long_g.trigger {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.0s ease-out;
  }

  .secret_long_g.move {
    clip-path: inset(0);
  }

  .secret_arrow.trigger {
    clip-path: inset(100% 0 0 0);
    transition: all 1.0s 0s ease;
    transition-delay: 0.3s;
  }

  .secret_arrow.trigger.move {
    clip-path: inset(0);
  }
 .mask-path.trigger {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  .mask-path.trigger.move {
    animation: dashMove 1s linear forwards;
  }

  @keyframes dashMove {
    to {
      stroke-dashoffset: 0;
    }
  }