html{font-size:62.5%}body{color:#000;background-color:#fff;line-height:1;font-size:1.6rem;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;width:100%;height:100%;min-width:320px;margin:0 auto;font-family:Meiryo,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",sans-serif}a{color:#000;-webkit-transition:0.5s;transition:0.5s}button{font-family:Meiryo,-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN",sans-serif}.container{display:block;position:relative;margin:0 auto;width:100%}.page-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100vh}.page{position:relative;width:100%;max-width:1410px;margin:0 auto}@media only screen and (min-width: 1024px){.page{width:calc(100% - 100px)}}@media only screen and (min-width: 1260px){.page{width:calc(100% - 200px)}}@media only screen and (min-width: 1610px){.page{width:1410px}}.main{position:relative;width:100%;height:100%;z-index:10}.main-box{position:relative;height:100%}.animation-base-container{position:relative;margin:0 auto}@media screen and (max-width: 850px) and (min-aspect-ratio: 2 / 1){.animation-base-container{width:70%}}@media screen and (max-width: 850px) and (min-aspect-ratio: 5 / 2){.animation-base-container{width:60%}}@media screen and (min-width: 851px) and (min-aspect-ratio: 4 / 3){.animation-base-container{width:80%}}@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1){.animation-base-container{width:70%}}@media screen and (min-width: 851px) and (min-aspect-ratio: 5 / 2){.animation-base-container{width:60%}}@media screen and (min-width: 851px) and (min-aspect-ratio: 20 / 9){.animation-base-container{width:50%}}.animation-base{display:block;width:100%;aspect-ratio:1 / 0.766;z-index:20}.animation-target{width:100%;height:100%}.control,.control--single,.control--multiple{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;bottom:0;left:0;z-index:20}.control--single .nav__btn,.control--single .control--multiple .nav__btn--prev,.control--multiple .control--single .nav__btn--prev,.control--single .control--multiple .nav__btn--next,.control--multiple .control--single .nav__btn--next,.control--single .control--multiple .nav__btn--play,.control--multiple .control--single .nav__btn--play,.control--single .control--multiple .nav__btn--restart,.control--multiple .control--single .nav__btn--restart{height:60px;width:280px;padding:15px 20px;color:#fff;background-color:#f42733;border-radius:30px;border:0;outline:0;font-size:1.8em;font-weight:700;text-align:center;pointer-events:all;cursor:pointer}.control--single .nav__btn.start,.control--single .control--multiple .start.nav__btn--prev,.control--multiple .control--single .start.nav__btn--prev,.control--single .control--multiple .start.nav__btn--next,.control--multiple .control--single .start.nav__btn--next,.control--single .control--multiple .start.nav__btn--play,.control--multiple .control--single .start.nav__btn--play,.control--single .control--multiple .start.nav__btn--restart,.control--multiple .control--single .start.nav__btn--restart{background-color:#ccc;pointer-events:none}.control--multiple{width:100%}.control--multiple .nav{width:38%;max-width:500px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 auto;padding:0%}@media only screen and (min-width: 768px){.control--multiple .nav{padding:1% 0}}@media only screen and (min-width: 1024px){.control--multiple .nav{padding:2% 0}}@media only screen and (min-width: 1260px){.control--multiple .nav{padding:3% 0}}@media only screen and (min-width: 1610px){.control--multiple .nav{padding:8px 0}}@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1){.control--multiple .nav{padding:10px 0}}.control--multiple .nav__box{position:relative;width:25%}@media only screen and (min-width: 768px){.control--multiple .nav__box{width:20%}}.control--multiple .nav__btn,.control--multiple .nav__btn--prev,.control--multiple .nav__btn--next,.control--multiple .nav__btn--play,.control--multiple .nav__btn--restart{position:relative;width:100%;border:0;outline:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;aspect-ratio:1 / 1}.control--multiple .nav__btn img,.control--multiple .nav__btn--prev img,.control--multiple .nav__btn--next img,.control--multiple .nav__btn--play img,.control--multiple .nav__btn--restart img{width:100%}.control--multiple .nav__btn.disable,.control--multiple .disable.nav__btn--prev,.control--multiple .disable.nav__btn--next,.control--multiple .disable.nav__btn--play,.control--multiple .disable.nav__btn--restart{pointer-events:none;-webkit-filter:grayscale(1);filter:grayscale(1)}.control--multiple .nav__btn--play>img{position:absolute;display:block;top:0;left:0;width:100%;height:100%}.control--multiple .nav__btn--play>.stop{display:none}.control--multiple .nav__btn--play.is-play>.play{display:none}.control--multiple .nav__btn--play.is-play>.stop{display:block}.control--multiple .nav__btn--restart{display:none;position:absolute;width:320%;aspect-ratio:4 / 1;-webkit-transform:translate(0, 10%);transform:translate(0, 10%)}.control--multiple .nav__btn--restart>img{display:block;width:100%;-webkit-transform:translate(5%, 10%);transform:translate(5%, 10%)}.control--multiple.narrow .nav{width:45%;margin-left:8%}.control--multiple.narrow .nav__box{width:18%}@media only screen and (min-width: 768px){.control--multiple.narrow .nav__box{width:14%}}.control--multiple.narrow .nav__btn--restart{-webkit-transform:translate(-60%, 120%);transform:translate(-60%, 120%)}