@charset "UTF-8";

main{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
}



main > div#fv > img.total_amount{
  position: absolute;
    top: 2.0%;
    right: auto;
    bottom: auto;
    left: 47.5%;
    transform: translateX(-50%);
    margin: 0 auto;
    animation: fadeinScale 1s ease forwards;
}

@keyframes fadeinScale{
  from{
    width: 0;
  }
  to{
    width: 55%;
  }
}

main > div#fv > img.fv-txt01{
  position: absolute;
  right: 6%;
  bottom: auto;
  left: auto;
  animation: fadein_bottomSlide01 1.0s ease forwards;
  width: 10%;
}

@keyframes fadein_bottomSlide01{
  from{
    opacity: 0;
    top: 20%;
  }
  to{
    opacity: 1;
    top: 15%;
  }
}

main > div#fv > img.fv-txt02{
  position: absolute;
  right: 18%;
  bottom: auto;
  left: auto;
  animation: fadein_bottomSlide02 1.5s ease forwards;
  width: 10%;
}

@keyframes fadein_bottomSlide02{
  from{
    opacity: 0;
    top: 25%;
  }
  to{
    opacity: 1;
    top: 20%;
  }
}

  main > div#fv > img.fv-txt03{
    position: absolute;
    top: auto;
    right: auto;
    left: 8.5%;
    animation: fadein_bottomSlide03 2.0s ease forwards;
    width: 10%;
    }

    @keyframes fadein_bottomSlide03{
      from{
        bottom: 3%;
        opacity: 0;
      }
      to{
        opacity: 1;
        bottom: 8%;
      }
    }

    main > div#movie > img.movie_img{
      position: absolute;
    aspect-ratio: 780/439;
    width: 70%;
    margin: 0 auto;
    top: auto;
    right: 0;
    bottom: 14%;
    left: 0;
    }

    main > div#movie > img.purupuru{
      position: absolute;
      animation: purupuru 1.5s linear 0s infinite;
      top: 1%;
      right: auto;
      bottom: auto;
      left: 1%;
      width: 30%;
    }
    
    @keyframes purupuru {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      30%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      40%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
      50%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
      60%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
      70%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
      80% { transform: scale(1.0, 1.0) translate(0%, 0%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

    main > div#stinging > img.yobou.inview{
      position: absolute;
      top: auto;
      right: auto;
      bottom: 10%;
      left: 5%;
      margin: 0 auto;
      width: 28%;
    }
    main > div#stinging > img.clean.inview{
      position: absolute;
      top: auto;
      right: 0;
      bottom: 10%;
      left: 0;
      margin: 0 auto;
      width: 28%;
    }
    main > div#stinging > img.skincare.inview{
      position: absolute;
      top: auto;
      right: 5%;
      bottom: 10%;
      left: auto;
      margin: 0 auto;
      width: 28%;
    }

    main > div#cart01 > a,
    main > div#cart01 > a:link,
    main > div#cart01 > a:visited,
    main > div#cart01 > a:hover,
    main > div#cart03 > a,
    main > div#cart03 > a:link,
    main > div#cart03 > a:visited,
    main > div#cart03 > a:hover{
      position: absolute;
      top: 65%;
      right: 0;
      bottom: auto;
      left: 0;
      animation: poyopoyo 1.3s linear 0s infinite;
      margin: 0 auto;
      transform: translateX(-50%);
      transform: translateY(-50%);
    }

    @keyframes poyopoyo {
      0%, 100%{ width: 70%;}
      50%{ width: 96%;}
    }

    main > div#cart01 > a > img,
    main > div#cart03 > a > img{
      width: 100%;
      display: flex;
      height: auto;
    }

    main > div#cart02 > a,
    main > div#cart02 > a:link,
    main > div#cart02 > a:visited,
    main > div#cart02 > a:hover,
    main > div#cart04 > a,
    main > div#cart04 > a:link,
    main > div#cart04 > a:visited,
    main > div#cart04 > a:hover{
      position: absolute;
      top: 57%;
      right: 0;
      bottom: auto;
      left: 0;
      width: 80%;
      margin: 0 auto;
    }

    main > div#cart02 > a > img,
    main > div#cart04 > a > img{
      width: 100%;
      display: flex;
      height: auto;
    }

    main > div#media01 > img.txt01{
      position: absolute;
      margin: 0 auto;
      top: 46%;
      right: 0;
      bottom: auto;
      left: 0;
    }

    main > div#media01 > img.txt01.js-fadeScale6.inview{
      width: 65%;
      transform: translateX(-50%);
      transform: translateY(-50%);
    }

    main > div#media02 > img.txt01{
      position: absolute;
      top: 15%;
      right: 25%;
      bottom: auto;
      left: auto;
      width: 24%;
    }

    main > div#total_amount > img.txt01{
      position: absolute;
    top: 37%;
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0 auto;
    }

    main > div#total_amount > img.txt01.js-fadeScale.inview{
      width: 70%;
      transform: translateX(-50%);
      transform: translateY(-50%);
    }

    main > div#real > img.icon01{
      position: absolute;
      top: 55%;
      right: auto;
      bottom: auto;
      left: 5%;
      width: 23%;
    }
    main > div#real > img.icon02{
      position: absolute;
      top: 43%;
      right: 4%;
      bottom: auto;
      left: auto;
      width: 23%;

    }
    main > div#real > img.icon03{
      position: absolute;
      top: 69%;
      right: 14%;
      bottom: auto;
      left: auto;
      width: 23%;
    }

    main > div#cause > div.txt01.js-fadeScale1.inview{
      position: absolute;
      top: 34.8%;
      right: auto;
      bottom: auto;
      left: 32.2%;
      width: 55%;
      transform: translate(-50%,-50%);
    }

    main > div#cause > div.txt01.js-fadeScale1.inview > img{
      object-fit: cover;
    }

    main > div#cause > div.txt02.js-fadeScale2{
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.5s cubic-bezier(0.37,0,0.63,1);
      transition-property: clip-path;
      line-height: 1;
      transform: translate(0, -50%);
      width: 39%;
      position: absolute;
      top: 70.2%;
      right: auto;
      bottom: auto;
      left: 53%;
    }

    main > div#cause > div.txt02.js-fadeScale2.inview{
      clip-path: inset(0);
    }

    main > div#cause > div.txt02.js-fadeScale2.inview > img{
      
    }

    main > div#cause > div.txt03.js-fadeScale3{
      position: absolute;
      top: auto;
      right: auto;
      bottom: 20%;
      left: 7.3%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.8s cubic-bezier(0.37,0,0.63,1);
      transition-property: clip-path;
      line-height: 1;
      transform: translate(0, -50%);
      width: 75.5%;
    }

    main > div#cause > div.txt03.js-fadeScale3.inview{
      clip-path: inset(0);
    }

    main > div#cause > div.txt03 > img{
      
    }

    main > div#cause > div.txt04.js-fadeScale4{
      position: absolute;
      top: auto;
      right: auto;
      bottom: 9.8%;
      left: 64%;
      width: 29%;
      transform: translate(0,-50%);
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.8s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#cause > div.txt04.js-fadeScale4.inview{
      clip-path: inset(0);
    }

    main > div#cause > div.txt04 > img{
      
    }

    main > div#cause > div.txt05.js-fadeScale5{
      position: absolute;
      top: auto;
      right: auto;
      bottom: 4.4%;
      left: 8.3%;
      transform: translate(0,-50%);
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
      width: 14%;
    }

    main > div#cause > div.txt05.js-fadeScale5.inview{
      clip-path: inset(0);
    }

    main > div#cause > div.txt05 > img{
      
    }

    main > div#thick > img.txt01{
      position: absolute;
      top: 20%;
      right: auto;
      bottom: auto;
      left: 69%;
      transform: translate(-50%, -50%);
    }

    main > div#thick > img.txt01.js-fadeScale.inview{
      width: 11%;
    }

    main > div#thick > div.txt02.js-fadeScale3{
      position: absolute;
      top: 84%;
      margin: 0 auto;
      right: auto;
      left: 5%;
      width: 68%;
      transform: translate(0,-50%);
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#thick > div.txt02.js-fadeScale3.inview{
      clip-path: inset(0);
    }

    main > div#thick > div.txt02.js-fadeScale3.inview > img{
      
    }

    main > div#point > img.txt01{
      position: absolute;
      top: 13%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width:86%;
    }

    main> div#interaction > img.txt01{
      position: absolute;
      top: 41%;
      right: auto;
      bottom: auto;
      left: 11%;
      width: 25%;
    }
    main> div#interaction > img.txt02{
      position: absolute;
      top: 41%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 25%;
    }
    main> div#interaction > img.txt03{
      position: absolute;
      top: 41%;
      right: auto;
      bottom: auto;
      left: 65%;
      width: 25%;
    }
    main> div#interaction > div.txt04{
      position: absolute;
      top: 77%;
      right: auto;
      bottom: auto;
      left: 7%;
      width: 87%;
      margin: 0 auto;
      
    }

    main > div#effects > img.txt01{
      position: absolute;
      top: 71%;
      right: auto;
      bottom: auto;
      left: 4%;
      width: 30%;
    }
    main > div#effects > img.txt02{
      position: absolute;
      top: 71%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 30%;
    }
    main > div#effects > img.txt03{
      position: absolute;
      top: 71%;
      right: auto;
      bottom: auto;
      left: 66%;
      width: 30%;
    }


    main > div#o-effects > div.txt01.js-fadeScale{
      position: absolute;
      top: 15.4%;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    main > div#o-effects > div.txt01.js-fadeScale.inview{
      width: 35%;
    }


    main > div#point01_01 > div.txt01{
      position: absolute;
      transform: translate(-50%,-50%);
      top: 79%;
      right: auto;
      bottom: auto;
      left: 33%;
      overflow: hidden;
    }

    main > div#point01_01 > div.txt01.js-fadeScale.inview{
      width: 52%;
      margin: 0 auto;
    }

    main > div#point01_02 > div.txt01.js-fadeScale{
      position: absolute;
      overflow: hidden;
      transform: translate(0,-50%);
      top: 53.4%;
      right: auto;
      bottom: auto;
      left: 9.5%;
      width: 80%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#point01_02 > div.txt01.js-fadeScale.inview{
      clip-path: inset(0);
    }

    main > div#point01_02 > div.txt01.js-fadeScale.inview > img{
      
    }
    main > div#point01_02 > div.txt02.js-fadeScale2{
      position: absolute;
      overflow: hidden;
      transform: translate(0,-50%);
      top: 56.8%;
      right: auto;
      bottom: auto;
      left: 62.4%;
      width: 27.4%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#point01_02 > div.txt02.js-fadeScale2.inview{
      clip-path: inset(0);
    }

    main > div#point01_02 > div.txt02.js-fadeScale2.inview > img{
      
    }

    main > div#point01_02 > div.txt03.js-fadeScale3{
      position: absolute;
      overflow: hidden;
      transform: translate(0,-50%);
      top: 60.2%;
      right: auto;
      bottom: auto;
      left: 10%;
      width: 24.2%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#point01_02 > div.txt03.js-fadeScale3.inview{
      clip-path: inset(0);
    }

    main > div#point01_02 > div.txt03.js-fadeScale3.inview > img{
      
    }

    main > div#point01_02 > img.txt04.js-fadeTop2{
      position: absolute;
      top: 65.4%;
      right: 0;
      left: 0;
      bottom: auto;
      margin: 0 auto;
      width: 22%;
    }

    main > div#point01_02 > div.txt05{
      position: absolute;
      overflow: hidden;
      transform: translate(-50%,-50%);
      top: 88%;
      right: auto;
      bottom: auto;
      left: 38%;
    }

    main > div#point01_02 > div.txt05.js-fadeScale.inview{
      width: 27.4%;
    }

    main > div#point01_02 > div.txt05.js-fadeScale.inview > img{
      object-fit: cover;
    }
    
    main > div#point01_02 > div.txt06.js-fadeScale2{
      position: absolute;
      overflow: hidden;
      transform: translate(-50%,-50%);
      top: 88%;
      right: auto;
      bottom: auto;
      left: 74%;
    }

    main > div#point01_02 > div.txt06.js-fadeScale2.inview{
      width: 29.4%;
      }

    main > div#point01_02 > div.txt06.js-fadeScale2.inview > img{
      object-fit: cover;
    }

    main > div#point01_03 > img.txt01.js-fadeTop3.inview{
      position: absolute;
      top: 57%;
      right: 0;
      left: 0;
      bottom: auto;
      margin: 0 auto;
      z-index: 1;
      width: 65%;
    }

    main > div#point01_03 > img.txt02.js-fadeTop4.inview{
      position: absolute;
    top: 61%;
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0 auto;
    width:94%;
    }

    main > div#point01_04 > img.txt01.js-fadeScale.inview{
      position: absolute;
      transform: translate(-50%,-50%);
      top: 31%;
      right: auto;
      bottom: auto;
      left: 50%;
      width: 90%;
      transition-delay: 0s;
    }
    main > div#point01_04 > img.txt02.js-fadeScale2.inview{
      position: absolute;
      transform: translate(-50%,-50%);
      top: 85%;
      right: auto;
      bottom: auto;
      left: 38.5%;
      width: 7%;
      transition-delay: 0s;
    }
    main > div#point01_04 > img.txt03.js-fadeScale2.inview{
      position: absolute;
      transform: translate(-50%,-50%);
      top: 85%;
      right: auto;
      bottom: auto;
      left: 61%;
      width: 7%;
    }

    main > div#point01_05 > div.txt01.js-fadeScale{
      position: absolute;
      transform: translate(-50%,-50%);
      top: 85%;
      right: auto;
      bottom: auto;
      left: 50%;
      overflow: hidden;
    }

    main > div#point01_05 > div.txt01.js-fadeScale.inview{
      width: 87%;
      margin: 0 auto;
    }

    main > div#point01_05 > div.txt01.js-fadeScale.inview > img{
      object-fit:cover;
    }

    main > div#point02_01 > div.txt01.js-fadeScale{
      position: absolute;
      transform: translate(-50%, -50%);
      top: 76%;
      right: auto;
      bottom: auto;
      left: 27%;
      overflow: hidden;
    }

    main > div#point02_01 > div.txt01.js-fadeScale.inview{
      width: 52%;
    }

    main > div#point02_01 > div.txt01.js-fadeScale.inview > img{
      object-fit: cover;
    }

    main > div#point02_02 > img.movie_clean{
      position: absolute;
      top: 8.8%;
      right: 0;
      bottom: auto;
      left: 0;
      width: 91%;
      margin: 0 auto;
    }

    main > div#point02_02 > img.txt01.js-fadeBottom2{
      position: absolute;
      top: 33%;
      right: auto;
      bottom: auto;
      left: 69%;
      width: 24%;
    }
    main > div#point02_02 > img.txt02.js-fadeBottom3{
      position: absolute;
      top: 13%;
      right: auto;
      bottom: auto;
      left: 7%;
      width: 24%;
    }
    main > div#point02_02 > img.txt03.js-fadeBottom4{
      position: absolute;
      top: 44%;
      right: auto;
      bottom: auto;
      left: 15%;
      width: 24%;
    }

    main > div#point02_02 > div.txt04.js-fadeScale{
      position: absolute;
      transform: translate(0,-50%);
      overflow: hidden;
      top: 91.7%;
      right: auto;
      bottom: auto;
      left: 7%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
      width: 50%;
    }

    main > div#point02_02 > div.txt04.js-fadeScale.inview{
      clip-path: inset(0);
    }

    main > div#point02_02 > div.txt04.js-fadeScale.inview > img{
      
    }

    main > div#point03_01 > img.movie_bihaku{
      width: 90%;
      position: absolute;
      top: 53%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
    }

    main > div#point03_01 > div.txt01.js-fadeScale{
      position: absolute;
      transform: translate(0, -50%);
      top: 91%;
      right: auto;
      bottom: auto;
      left: 5%;
      width: 90%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#point03_01 > div.txt01.js-fadeScale.inview{
      clip-path: inset(0);
    }

    main > div#point03_01 > div.txt01.js-fadeScale.inview > img{
      
    }

    main > div#free_material > img.txt01.js-fadeBottom2.inview{
      position: absolute;
      top: 40%;
      right: auto;
      bottom: auto;
      left: 25%;
      width: 24%;
    }
    
    main > div#free_material > img.txt02.js-fadeBottom3.inview{
      position: absolute;
      top: 40%;
      right: auto;
      bottom: auto;
      left: 53%;
      width: 24%;
    }
    
    main > div#free_material > img.txt03.js-fadeBottom4.inview{
      position: absolute;
      top: 60%;
      right: auto;
      bottom: auto;
      left: 12%;
      width: 24%;
    }
    main > div#free_material > img.txt04.js-fadeBottom5.inview{
      position: absolute;
      top: 60%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 24%;
    }
    main > div#free_material > img.txt05.js-fadeBottom6.inview{
      position: absolute;
      top: 60%;
      right: auto;
      bottom: auto;
      left: 65%;
      width: 24%;
    }

    main > div#healing > img.txt01.js-fadeBottom2.inview{
      position: absolute;
      top: 23%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 80%;
    }
    main > div#healing > img.txt02.js-fadeBottom3.inview{
      position: absolute;
      top: 35%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 90%;
    }
    main > div#healing > img.txt03.js-fadeBottom4.inview{
      position: absolute;
      top: 59%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 90%;
    }

    main > div#obsession > img.txt01.js-fadeBottom2.inview{
      position: absolute;
      top: 20%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 90%;
    }
    main > div#obsession > img.txt02.js-fadeBottom3.inview{
      position: absolute;
      top: 79%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      
      width: 90%;
    }

    main > div#stinging_test > div.txt01.js-fadeScale1{
      position: absolute;
      transform: translate(0,-50%);
      overflow: hidden;
      top: 40%;
      right: auto;
      bottom: auto;
      left: 73%;
      width: 17%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }
    main > div#stinging_test > div.txt01.js-fadeScale1.inview{
      clip-path: inset(0);
    }
    main > div#stinging_test > div.txt01.js-fadeScale1.inview > img{
      
    }
    main > div#stinging_test > div.txt02.js-fadeScale2{
      position: absolute;
      transform: translate(0,-50%);
      overflow: hidden;
      top: 46.8%;
      right: auto;
      bottom: auto;
      left: 50.5%;
      width: 39%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }
    main > div#stinging_test > div.txt02.js-fadeScale2.inview{
      clip-path: inset(0);
    }
    main > div#stinging_test > div.txt02.js-fadeScale2.inview > img{
      
    }
    main > div#stinging_test > div.txt03.js-fadeScale3{
      position: absolute;
      transform: translate(0,-50%);
      overflow: hidden;
      top: 54.5%;
      right: auto;
      bottom: auto;
      left: 50.5%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
      width: 39%;
    }
    main > div#stinging_test > div.txt03.js-fadeScale3.inview{
      clip-path: inset(0);
    }
    main > div#stinging_test > div.txt03.js-fadeScale3.inview > img{
      
    }
    main > div#stinging_test > div.txt04.js-fadeScale4{
      position: absolute;
      transform: translate(0,-50%);
      overflow: hidden;
      top: 63%;
      right: auto;
      bottom: auto;
      left: 50.5%;
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
      width: 39%;
    }
    main > div#stinging_test > div.txt04.js-fadeScale4.inview{
      clip-path: inset(0);
    }
    
    main > div#stinging_test > div.txt04.js-fadeScale4.inview > img{
      
    }

    main > div#madeInJapan > img.txt01.js-fadeBottom.inview{
      position: absolute;
      top: 15%;
      right: auto;
      bottom: auto;
      left: 5%;
      width: 25%;
    }

    main > div#madeInJapan > div.txt02.js-fadeScale1{
      position: absolute;
      transform: translate(0,-50%);
      top: 47.5%;
      right: auto;
      bottom: auto;
      left: 57.5%;
      width: 36%;
      transform: translate(0,-50%);
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
    }

    main > div#madeInJapan > div.txt02.js-fadeScale1.inview{
      clip-path: inset(0);
    }

    main > div#madeInJapan > div.txt02.js-fadeScale1.inview > img{
      
    }

    main > div#madeInJapan > div.txt03.js-fadeScale2{
      position: absolute;
      transform: translate(0, -50%);
      overflow: hidden;
      top: 57%;
      right: auto;
      bottom: auto;
      left: 49%;
      transform: translate(0,-50%);
      clip-path: inset(0 100% 0 0);
      display: inline-flex;
      transition: 0.2s cubic-bezier(0.37,0,0,63,1);
      transition-property: clip-path;
      line-height: 1;
      width: 21%;
    }

    main > div#madeInJapan > div.txt03.js-fadeScale2.inview{
      clip-path: inset(0);
    }

    main > div#madeInJapan > div.txt03.js-fadeScale2.inview > img{
      
    }

    main > div#body_care > img.txt01.js-fadeBottom2.inview{
      position: absolute;
      top: 22%;
      right: auto;
      bottom: auto;
      left: 6%;
      width: 42%;
    }
    main > div#body_care > img.txt02.js-fadeBottom3.inview{
      position: absolute;
      top: 28%;
      right: auto;
      bottom: auto;
      left: 52%;
      width: 42%;
    }
    main > div#body_care > img.txt03.js-fadeBottom4.inview{
      position: absolute;
      top: 46%;
      right: auto;
      bottom: auto;
      left: 9%;
      width: 42%;
    }
    main > div#body_care > img.txt04.js-fadeBottom5.inview{
      position: absolute;
      top: 53%;
      right: auto;
      bottom: auto;
      left: 52%;
      width: 42%;
    }
    main > div#body_care > img.txt05.js-fadeBottom6.inview{
      position: absolute;
      top: 69%;
      right: auto;
      bottom: auto;
      left: 11%;
      width: 42%;
    }

    main > div#users_voice > img.txt01.js-fadeBottom.inview{
      position: absolute;
      top: 70%;
      right: 0;
      bottom: auto;
      left: 0;
      margin: 0 auto;
      width: 60%;
    }

   main > div#aim > img.txt01.js-fadeBottom2.inview{
    position: absolute;
    top: 5%;
    right: auto;
    bottom: auto;
    left: 83%;
    width: 10%;
   }
   main > div#aim > img.txt02.js-fadeBottom3.inview{
    position: absolute;
    top: 23%;
    right: auto;
    bottom: auto;
    left: 71%;
    width: 10%;
   }
   main > div#aim > img.txt03.js-fadeBottom4.inview{
    position: absolute;
    top: 7%;
    right: auto;
    bottom: auto;
    left: 20%;
    width: 10%;
   }
   main > div#aim > img.txt04.js-fadeBottom5.inview{
    position: absolute;
    top: 12%;
    right: auto;
    bottom: auto;
    left: 8%;
    width: 10%;
   }
   main > div#aim > img.txt05.js-fadeBottom6.inview{
    position: absolute;
    top: 80%;
    right: 0;
    bottom: auto;
    left: 4%;
    width: 30%;
   }
   main > div#aim > img.txt06.js-fadeBottom7.inview{
    position: absolute;
    top: 80%;
    right: 0;
    bottom: auto;
    left: 0;
    margin: 0 auto;
    width: 30%;

   }

   main > div#aim > img.txt07.js-fadeBottom8.inview{
    position: absolute;
    top: 80%;
    right: auto;
    bottom: auto;
    left: 66%;
    width: 30%;
   }

   main > details,
   main > details > summary{
    width: 100%;
    display: flex;
    height: auto;
   }

   main > details > img,
   main > details > summary > img{
    width: 100%;
    display: flex;
    height: auto;
   }

   main > details > summary{
    content: '';
    list-style:none;
    position: relative;
    cursor: pointer;
   }

   summary::-webkit-details-marker {
    display: none;
  }

   main > details > summary:after{
    content: '+';
    position: absolute;
    top: 45%;
    right: 5%;
    bottom: auto;
    left: auto;
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
    color: #6eaeba;
    transform: translateY(-50%);
    transition: transform 0.5s;
   }

   main > details[open] > summary:after{
    transform: translateY(-50%) rotate(45deg);  
  }

  details[open] .details-content {
    animation: fadeIn 0.5s ease;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0; /* 透明 */
      transform: translateY(-10px); /* 上から表示 */
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }