.title_octave{
    width:720px;
    height: 60px;
    font-size :26px;
    font-weight:bold;
    line-height :60px;
    letter-spacing: 3px;
    background:linear-gradient(to top, #00aaff, #ffffff 15%, #ffffff 85%,#00aaff);
    margin-bottom: 20px;
  }
  
  .title_octave2{
    font-size : 24px;
    font-weight: bold;
    line-height:200%;
    width :700px;
    background:linear-gradient(to top, #00aaff,#ffffff 30%,#ffffff);
    margin-bottom: 15px;
  }

  .text_octave{
    font-size : 23px;
    line-height : 150%;
    width : 700px;
    margin-bottom: 10px;
  }
  
  hr{
    width: 700px;
    border: 0;
    border-bottom: 2px solid #00aaff;
    margin-bottom: 20px;
  }



.img_effect_octave{
    width: 720px;
    height: 432px;
    position: relative;
    overflow: hidden;
    border: 2px solid #000000;
    margin-bottom: 50px;
  }

  .img1{
    width: 720px;
    height: 432px;
    position: absolute;
    top:0px;
    left:0px;
    animation: img1_a 20s infinite;
  }

  .img2{
    width: 360px;
    height: 432px;
    position: absolute;
    top:0px;
    left:0px;
    animation: img2_a 20s infinite ease-out;
  }

  .img3{
    width: 360px;
    height: 432px;
    position: absolute;
    top:0px;
    left:360px;
    animation: img3_a 20s infinite ease-out;
  }

  .img4{
    width: 360px;
    height: 432px;
    position: absolute;
    top:0px;
    left:0px;
    animation: img4_a 20s infinite ease-out;
  }

  .img5{
    width: 360px;
    height: 432px;
    position: absolute;
    top:0px;
    left:360px;
    animation: img5_a 20s infinite;
  }

  .img6{
    width: 360px;
    height: 432px;
    position: absolute;
    top:0px;
    left:0px;
    animation: img6_a 20s infinite;
    transform-origin: left bottom;
  }

  .img7{
    width: 360px;
    height: 432px;
    position: absolute;
    top:0px;
    left:360px;
    animation: img7_a 20s infinite;
    transform-origin: right top;
  }

  .img8{
    width: 720px;
    height: 432px;
    position: absolute;
    top:0px;
    left:0px;
    animation: img8_a 20s infinite;
  }


  @keyframes img1_a{
    0%{opacity: 1;}
    100%{opacity: 1;}
  }

  @keyframes img2_a{
      0%{opacity: 0;}
      19%{opacity: 0;transform: translateX(-100%);}
      20%{opacity: 1;transform: translateX(-100%);}
      25%{opacity: 1;transform: translateX(0%);}
      50%{opacity: 1;}
      51%{opacity: 0;}
      100%{opacity: 0;}
    }
  
  @keyframes img3_a{
      0%{opacity: 0;}
      24%{opacity: 0;transform: translateX(100%);}
      25%{opacity: 1;transform: translateX(100%);}
      30%{opacity: 1;transform: translateX(0%);}
      55%{opacity: 1;}
      56%{opacity: 0;}
      100%{opacity: 0;}
    }
  
  @keyframes img4_a{
      0%{opacity: 0;}
      44%{opacity: 0;transform: translateY(-100%);}
      45%{opacity: 1;transform: translateY(-100%);}
      50%{opacity: 1;transform: translateY(0%);}
      75%{opacity: 1;}
      76%{opacity: 0;}
      100%{opacity: 0;}
  }

  @keyframes img5_a{
    0%{opacity: 0;}
    49%{opacity: 0;transform: translateY(100%);}
    50%{opacity: 1;transform: translateY(100%);}
    55%{opacity: 1;transform: translateY(0%);}
    80%{opacity: 1;}
    81%{opacity: 0;}
    100%{opacity: 0;}
  }

  @keyframes img6_a{
    0%{opacity: 0;}
    69%{opacity: 0;transform: rotate(-90deg);}
    70%{opacity: 1;transform: rotate(-90deg);}
    75%{opacity: 1;transform: rotate(0deg);}
    99%{opacity: 1;}
    100%{opacity: 0;}
  }

  @keyframes img7_a{
    0%{opacity: 0;}
    74%{opacity: 0;transform: rotate(-90deg);}
    75%{opacity: 1;transform: rotate(-90deg);}
    80%{opacity: 1;transform: rotate(0deg);}
    99%{opacity: 1;}
    100%{opacity: 0;}
  }

  @keyframes img8_a{
    0%{opacity: 0;}
    95%{opacity: 0;}
    100%{opacity: 1;}
  }


  .sugo_tec{
    display: flex;
    width: 700px;
    height: 40px;
    margin-bottom: 10px;
  }

  .sugo_tec_title{
    text-align: left;
    padding-left: 10px;
    font-size: 24px;
    line-height: 40px;
  }

  .number_circle{
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    background-color: #57abc5;
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    line-height: 40px;
    font-weight: bold;
    text-align: center;
  }


  
  .plan_360-504_box{
    width: 360px;
    height: 550px;
    margin: 0px 5px 30px;
  }

  .plan_360-504{
    display: flex;
    flex-wrap: wrap;
    width: 740px;
    margin-bottom: 150px;
  }

  .plan_360-504_box_t1{
    width: 360px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
    text-align: left;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .plan_360-504_box_t2{
    width: 360px;
    height: 26px;
    font-size: 14px;
    line-height: 26px;
    font-weight: bold;
    color: #fff;
    background-color: #57abc5;
  }