@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
/*********************************
 *
 * COMMON
 *
 *********************************/
body {
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: min(1.2vw, 18px);
  font-weight: 500; }
  @media screen and (max-width: 750px) {
    body {
      max-width: 750px;
      font-size: min(3vw, 16px);
      -webkit-text-size-adjust: 100%; }
      body .pc {
        display: none !important; } }
  @media screen and (min-width: 751px) {
    body a {
      transition: 0.3s; }
      body a:hover {
        opacity: 0.8; }
    body .sp {
      display: none !important; } }
  body a {
    text-decoration: none; }
  body img {
    width: 100%;
    height: auto; }

/* anime */
.rotate {
  animation: rotateAnime 0.75s linear infinite; }

@-webkit-keyframes rotateAnime {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
.rotate_pink {
  animation: rotate_pinkAnime 4s linear forwards; }

@-webkit-keyframes rotate_pinkAnime {
  0% {
    transform: rotate(40deg); }
  21% {
    transform: rotate(440deg); }
  40% {
    transform: rotate(550deg); }
  67% {
    transform: rotate(660deg); }
  98% {
    transform: rotate(708deg); }
  100% {
    transform: rotate(708deg); } }
.rotate_yellow {
  animation: rotate_yellowAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_yellowAnime {
  0% {
    transform: rotate(22deg); }
  21% {
    transform: rotate(418deg); }
  40% {
    transform: rotate(522deg); }
  67% {
    transform: rotate(638deg); }
  98% {
    transform: rotate(686deg); }
  100% {
    transform: rotate(686deg); } }
.rotate_blue {
  animation: rotate_blueAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_blueAnime {
  0% {
    transform: rotate(-5deg); }
  21% {
    transform: rotate(395deg); }
  40% {
    transform: rotate(505deg); }
  67% {
    transform: rotate(615deg); }
  98% {
    transform: rotate(663deg); }
  100% {
    transform: rotate(663deg); } }
.rotate_gray {
  animation: rotate_grayAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_grayAnime {
  0% {
    transform: rotate(-27deg); }
  21% {
    transform: rotate(373deg); }
  40% {
    transform: rotate(483deg); }
  67% {
    transform: rotate(593deg); }
  98% {
    transform: rotate(641deg); }
  100% {
    transform: rotate(641deg); } }
.rotate_light_green {
  animation: rotate_light_greenAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_light_greenAnime {
  0% {
    transform: rotate(-49deg); }
  21% {
    transform: rotate(351deg); }
  40% {
    transform: rotate(461deg); }
  67% {
    transform: rotate(571deg); }
  98% {
    transform: rotate(619deg); }
  100% {
    transform: rotate(619deg); } }
.rotate_light_orange {
  animation: rotate_light_orangeAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_light_orangeAnime {
  0% {
    transform: rotate(-70deg); }
  21% {
    transform: rotate(328deg); }
  40% {
    transform: rotate(438deg); }
  67% {
    transform: rotate(548deg); }
  98% {
    transform: rotate(596deg); }
  100% {
    transform: rotate(596deg); } }
.rotate_white {
  animation: rotate_whiteAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_whiteAnime {
  0% {
    transform: rotate(-92deg); }
  21% {
    transform: rotate(306deg); }
  40% {
    transform: rotate(416deg); }
  67% {
    transform: rotate(526deg); }
  98% {
    transform: rotate(574deg); }
  100% {
    transform: rotate(574deg); } }
.rotate_brown {
  animation: rotate_brownAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_brownAnime {
  0% {
    transform: rotate(-114deg); }
  21% {
    transform: rotate(284deg); }
  40% {
    transform: rotate(394deg); }
  67% {
    transform: rotate(504deg); }
  98% {
    transform: rotate(551deg); }
  100% {
    transform: rotate(551deg); } }
.rotate_red {
  animation: rotate_redAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_redAnime {
  0% {
    transform: rotate(-136deg); }
  21% {
    transform: rotate(262deg); }
  40% {
    transform: rotate(372deg); }
  67% {
    transform: rotate(482deg); }
  98% {
    transform: rotate(529deg); }
  100% {
    transform: rotate(529deg); } }
.rotate_green {
  animation: rotate_greenAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_greenAnime {
  0% {
    transform: rotate(-158deg); }
  21% {
    transform: rotate(240deg); }
  40% {
    transform: rotate(350deg); }
  67% {
    transform: rotate(460deg); }
  98% {
    transform: rotate(506deg); }
  100% {
    transform: rotate(506deg); } }
.rotate_purple {
  animation: rotate_purpleAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_purpleAnime {
  0% {
    transform: rotate(-180deg); }
  21% {
    transform: rotate(218deg); }
  40% {
    transform: rotate(328deg); }
  67% {
    transform: rotate(438deg); }
  98% {
    transform: rotate(484deg); }
  100% {
    transform: rotate(484deg); } }
.rotate_black {
  animation: rotate_blackAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_blackAnime {
  0% {
    transform: rotate(-202deg); }
  21% {
    transform: rotate(198deg); }
  40% {
    transform: rotate(306deg); }
  67% {
    transform: rotate(416deg); }
  98% {
    transform: rotate(461deg); }
  100% {
    transform: rotate(461deg); } }
.rotate_light_pink {
  animation: rotate_light_pinkAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_light_pinkAnime {
  0% {
    transform: rotate(-224deg); }
  21% {
    transform: rotate(176deg); }
  40% {
    transform: rotate(284deg); }
  67% {
    transform: rotate(394deg); }
  98% {
    transform: rotate(438deg); }
  100% {
    transform: rotate(438deg); } }
.rotate_any_color {
  animation: rotate_any_colorAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_any_colorAnime {
  0% {
    transform: rotate(-246deg); }
  21% {
    transform: rotate(154deg); }
  40% {
    transform: rotate(262deg); }
  67% {
    transform: rotate(372deg); }
  98% {
    transform: rotate(416deg); }
  100% {
    transform: rotate(416deg); } }
.rotate_orange {
  animation: rotate_orangeAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_orangeAnime {
  0% {
    transform: rotate(-268deg); }
  21% {
    transform: rotate(132deg); }
  40% {
    transform: rotate(240deg); }
  67% {
    transform: rotate(350deg); }
  98% {
    transform: rotate(394deg); }
  100% {
    transform: rotate(394deg); } }
.rotate_light_blue {
  animation: rotate_light_blueAnime 3.9s linear forwards; }

@-webkit-keyframes rotate_light_blueAnime {
  0% {
    transform: rotate(-290deg); }
  21% {
    transform: rotate(110deg); }
  40% {
    transform: rotate(218deg); }
  67% {
    transform: rotate(328deg); }
  98% {
    transform: rotate(372deg); }
  100% {
    transform: rotate(372deg); } }
/*********************************
 *
 * BODY
 *
 *********************************/
body.top {
  background: #FFCDE3; }
body.pink {
  background: #EC81AA; }
  body.pink .img {
    width: 64%;
    left: 18%;
    top: 43.5%; }
body.blue {
  background: #6995CC; }
  body.blue .img {
    width: 64%;
    left: 18%;
    top: 43.5%; }
body.light_green {
  background: #B1CC49; }
  body.light_green .img {
    width: 54%;
    left: 23%;
    top: 47%; }
body.yellow {
  background: #FAF046; }
  body.yellow .img {
    width: 58%;
    left: 21%;
    top: 46%; }
body.gray {
  background: #B4B4B4; }
  body.gray .img {
    width: 58%;
    left: 21%;
    top: 46%; }
body.light_orange {
  background: #F4C09B; }
  body.light_orange .img {
    width: 56%;
    left: 22%;
    top: 46%; }
body.white {
  background: #FFFFFF; }
  body.white .img {
    width: 58%;
    left: 21%;
    top: 46%; }
body.red {
  background: #D44548; }
  body.red .img {
    width: 56%;
    left: 22%;
    top: 46%; }
body.purple {
  background: #B495BF; }
  body.purple .img {
    width: 58%;
    left: 21%;
    top: 46%; }
body.brown {
  background: #DCA66B; }
  body.brown .img {
    width: 58%;
    left: 21%;
    top: 45%; }
body.green {
  background: #69AF68; }
  body.green .img {
    width: 64%;
    left: 18%;
    top: 43.5%; }
body.black {
  background: #6E6E6E; }
  body.black .img {
    width: 60%;
    left: 20%;
    top: 45%; }
body.light_pink {
  background: #E19097; }
  body.light_pink .img {
    width: 58%;
    left: 21%;
    top: 45%; }
body.light_blue {
  background: #7DC1D3; }
  body.light_blue .img {
    width: 58%;
    left: 21%;
    top: 45.5%; }
body.orange {
  background: #F29600; }
  body.orange .img {
    width: 62%;
    left: 19%;
    top: 43.6%; }
body.any_color {
  background: #F8EDA3; }
  body.any_color .img {
    width: 62%;
    left: 19%;
    top: 43.8%; }

/*********************************
 *
 * MAIN
 *
 *********************************/
main .lcr_box {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto; }
main .lcr {
  position: absolute;
  width: 100%;
  max-width: 750px;
  top: 37.2%; }
main .lcr_img {
  position: relative;
  width: 69.86%;
  max-width: 524px;
  margin: 0 auto;
  padding: 6.5% 0 0 0; }
  main .lcr_img .img2 {
    position: absolute;
    width: 36.64%;
    max-width: 192px;
    left: 31.68%;
    top: 32.5%; }
  main .lcr_img .img3 {
    position: absolute;
    width: 13.54%;
    max-width: 71px;
    left: 43%;
    top: 0; }
main .img {
  position: absolute; }
main .start_btn {
  position: absolute;
  width: 45.88%;
  max-width: 344px;
  left: 27.06%;
  bottom: 12.6%;
  cursor: pointer; }
main .stop_btn {
  display: none;
  position: absolute;
  width: 45.88%;
  max-width: 344px;
  left: 27.06%;
  bottom: 12.6%;
  cursor: pointer; }
main .back_btn {
  position: absolute;
  width: 37.06%;
  max-width: 278px;
  left: 31.47%;
  bottom: 12.6%; }
main .x_btn {
  position: absolute;
  width: 60%;
  max-width: 450px;
  left: 20%;
  bottom: 4.2%; }
main .copy {
  position: absolute;
  width: 18.4%;
  max-width: 138px;
  left: 40.8%;
  bottom: 1.2%; }
  main .copy.top {
    bottom: 8.2%; }