@charset "UTF-8";
/* SP用設定 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media screen and (max-width: 800px) {
  
  .pc_hidden {display: block;}
  .sp_hidden {display: none;}
  
  /* ↓ top ↓ */
  #top > div {
    width: 77%;
    top: calc(80px + 4.13em);
    left: 50%;
    transform: translateX(-50%);
  }
  #top > div > p.st2 {
    font-size: 30px;
    font-size: 1em;
  }
  
  
  /* ↓ intro ↓ */
  #intro .content {
    width: 80%;
    text-align: center;
  }
  
  #intro .content p {
    font-size: 25px;
    font-size: 0.83em;
    line-height: 2.64em;
    letter-spacing: 0.11em;
  }
  
  #sircle1 {
    width: 7em;
    height: 7em;
    top: -2.6em;
    left: -3.9em;
  }
  #sircle2 {
    width: 11.1em;
    height: 11.1em;
    top: -1em;
    left: -2.9em;
  }
  #sircle3 {
    width: 8.25em;
    height: 8.25em;
    bottom: 6.5em;
    left: -1.7em;
  }
  #sircle4 {
    width: 5.3em;
    height: 5.3em;
    bottom: 4.5em;
    left: 2.4em;
  }
  #sircle5 {
    width: 10em;
    height: 10em;
    bottom: 11.1em;
    right: -1.8em;
  }
  #sircle6 {
    width: 8em;
    height: 8em;
    bottom: 5.8em;
    right: -2.9em;
  }
  #sircle7 {
    width: 10em;
    height: 10em;
    bottom: 0;
    right: -6.1em;
  }
  
  
  /* ↓ movie ↓ */
  #movie {padding: 3em 0;}
  #movie .movie-box {width: 80%;}
  
  
  /* ↓ feature ↓ */
  #feature {    padding: 2.76em;}
  #feature .content {padding: 2em;}
  #feature .content > p span:first-child {display: block;}
  #feature .content > #f-title {width: 53.4%;}
  .fbox .box .st2 {grid-area: 2 / 1 / 3 / 2;}
  .fbox .box .st3 {
    grid-area: 1 / 2 / 3 / 3;
    font-size: 38px;
    font-size: 1.12em;
    line-height: 1.4em;
  }
  .fbox .box .st4 {
    grid-area: 3 / 1 / 4 / 3;
    font-size: 27px;
    font-size: 0.82em;
    padding-right: 0;
    margin-top: 1.5em;
  }
  #component {
    width: 90%;
    display: block;
    margin-bottom: 0;
  }
  #component .item {
    font-size: 1.2em;
    margin: 1em auto;
  }
  #component p.st1 {position: relative;}
  #component .com-image.plus1 .st1::after {
    width: 200%;
    top: 700%;
    right: 0;
    z-index: 1;
  }
  .com-image .annotation {
        display: block;
    }
  
  #feature .fbox #easyGel {
    width: 100%;
    grid-template-columns: repeat(1, 80%);
    grid-gap: 1em;
    justify-content: center;
    padding-left: 0;
    margin-top: 5em;
  }
  #feature .fbox #easyGel .box > p {
    font-size: 0.8em;
    line-height: 1.3em;
    letter-spacing: 0.11em;
    bottom: 0.7em;
    left: 0.7em;
  }
  #feature .fbox #easyGel .box .annotation {
    font-size: 0.7em;
  }
  
  #f3 > .box {
    width: 100%;
    grid-template-columns: 2.5em 1fr;
    align-items: center;
  }
  #free {
    grid-area: 3 / 1 / 4 / 3;
    width: 70%;
    font-size: 1em;
    margin: 1em auto 0;
  }
  .com-image .annotation {
    font-size: 0.4em;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}