{"version":3,"sources":["_basic.scss","04_02.css","_setting.scss","_module.scss","_common.scss","_animation.scss"],"names":[],"mappings":"AAMA;EACE,gBAAgB;ACLlB;;ADQA;EACE,WAAW;EACX,sBAAsB;EACtB,cAAc;EACd,iBAAiB;EACjB,8BAA8B;EAC9B,mCAAmC;EACnC,WAAW;EACX,YAAY;EACZ,gBAAgB;EAGhB,cAAc;EACd,iHEZ8G;ADKhH;;ADUA;EACE,WAAW;EACX,wBAAgB;EAAhB,gBAAgB;ACPlB;;ADUA;EACE,iHErB8G;ADchH;;AEhBA;EACE,cAAc;EACd,kBAAkB;EAClB,cAAc;EACd,WAAW;AFmBb;;AG9BA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,WAAW;EACX,aAAa;AHiCf;;AG9BA;EACE,kBAAkB;EAClB,WAAW;EACX,iBAAiB;EACjB,cAAc;AHiChB;;ACPE;EE9BF;IAOI,yBAAyB;EHmC3B;AACF;;ACPE;EEpCF;IAWI,yBAAyB;EHqC3B;AACF;;ACPE;EE1CF;IAeI,aAAa;EHuCf;AACF;;AGpCA;EACE,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,WAAW;AHuCb;;AGpCA;EACE,kBAAkB;EAClB,YAAY;AHuCd;;AIxEA;EACE,kBAAkB;EAClB,cAAc;AJ2EhB;;ACXE;EGlEF;IAKI,UAAU;EJ6EZ;AACF;;ACXE;EGxEF;IASI,UAAU;EJ+EZ;AACF;;ACXE;EG9EF;IAaI,UAAU;EJiFZ;AACF;;ACXE;EGpFF;IAiBI,UAAU;EJmFZ;AACF;;ACXE;EG1FF;IAqBI,UAAU;EJqFZ;AACF;;ACXE;EGhGF;IAyBI,UAAU;EJuFZ;AACF;;AI/EA;EACE,cAAc;EAEd,WAAW;EACX,uBAAuB;EAIvB,WAAW;AJ8Eb;;AI3EA;EACE,WAAW;EACX,YAAY;AJ8Ed;;AI3EA;EACE,kBAAkB;EAClB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,wBAAuB;MAAvB,qBAAuB;UAAvB,uBAAuB;EACvB,WAAW;EACX,SAAS;EACT,OAAO;EACP,WAAW;AJ8Eb;;AIxEA;EAII,YAAY;EACZ,YAAY;EACZ,kBAAkB;EAClB,WAAW;EACX,yBHtEa;EGuEb,mBAAmB;EACnB,SAAS;EACT,UAAU;EACV,gBAAgB;EAChB,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;AJwEnB;;AIxFA;EAmBM,sBAAsB;EACtB,oBAAoB;AJyE1B;;AIhEA;EAGE,WAAW;AJiEb;;AIpEA;EAMI,UAAU;EACV,gBAAgB;EAChB,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,yBAA8B;MAA9B,sBAA8B;UAA9B,8BAA8B;EAC9B,yBAAmB;MAAnB,sBAAmB;UAAnB,mBAAmB;EACnB,cAAc;EACd,WAAW;AJkEf;;AC7IE;EG+DF;IAeM,aAAa;EJoEjB;AACF;;AC7IE;EGyDF;IAmBM,aAAa;EJsEjB;AACF;;AC7IE;EGmDF;IAuBM,aAAa;EJwEjB;AACF;;AC7IE;EG6CF;IA2BM,cAAc;EJ0ElB;AACF;;AC9GE;EGQF;IA+BM,eAAe;EJ4EnB;AACF;;AI5GA;EAoCI,kBAAkB;EAClB,UAAU;AJ4Ed;;AChLE;EG+DF;IAwCM,UAAU;EJ8Ed;AACF;;AIvHA;EA6CI,kBAAkB;EAClB,WAAW;EACX,SAAS;EACT,UAAU;EACV,eAAe;EACf,yBAAiB;KAAjB,sBAAiB;MAAjB,qBAAiB;UAAjB,iBAAiB;EACjB,6BAA6B;EAC7B,mBAAmB;AJ8EvB;;AIlIA;EAuDM,WAAW;AJ+EjB;;AItIA;EA2DM,oBAAoB;EACpB,4BAAoB;UAApB,oBAAoB;AJ+E1B;;AI3IA;EA4EM,kBAAkB;EAClB,cAAc;EACd,MAAM;EACN,OAAO;EACP,WAAW;EACX,YAAY;AJmElB;;AIpJA;EAqFM,aAAa;AJmEnB;;AIxJA;EA0FQ,aAAa;AJkErB;;AI5JA;EA8FQ,cAAc;AJkEtB;;AIhKA;EAsGI,aAAa;EACb,kBAAkB;EAClB,WAAW;EACX,mBAAmB;EACnB,oCAA4B;UAA5B,4BAA4B;AJ8DhC;;AIxKA;EA6GM,cAAc;EACd,WAAW;EACX,qCAA6B;UAA7B,6BAA6B;AJ+DnC;;AI9KA;EAuHM,UAAU;EACV,eAAe;AJ2DrB;;AInLA;EA4HM,UAAU;AJ2DhB;;ACtPE;EG+DF;IA+HQ,UAAU;EJ6DhB;AACF;;AI7LA;EAoIM,wCAAgC;UAAhC,gCAAgC;AJ6DtC","file":"04_02.css","sourcesContent":["@charset \"UTF-8\";\r\n\r\n// =======================================\r\n// basic\r\n// =======================================\r\n\r\nhtml {\r\n  font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n  color: #000;\r\n  background-color: #fff;\r\n  line-height: 1;\r\n  font-size: 1.6rem;\r\n  -webkit-text-size-adjust: 100%;\r\n  -webkit-font-smoothing: antialiased;\r\n  width: 100%;\r\n  height: 100%;\r\n  min-width: 320px;\r\n  // min-width: 1024px;\r\n  // min-height: 768px;\r\n  margin: 0 auto;\r\n  font-family: $font-base;\r\n}\r\n\r\na {\r\n  color: #000;\r\n  transition: 0.5s;\r\n}\r\n\r\nbutton {\r\n  font-family: $font-base;\r\n}\r\n","html {\n  font-size: 62.5%;\n}\n\nbody {\n  color: #000;\n  background-color: #fff;\n  line-height: 1;\n  font-size: 1.6rem;\n  -webkit-text-size-adjust: 100%;\n  -webkit-font-smoothing: antialiased;\n  width: 100%;\n  height: 100%;\n  min-width: 320px;\n  margin: 0 auto;\n  font-family: Meiryo, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Hiragino Kaku Gothic ProN\", sans-serif;\n}\n\na {\n  color: #000;\n  transition: 0.5s;\n}\n\nbutton {\n  font-family: Meiryo, -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", \"Hiragino Kaku Gothic ProN\", sans-serif;\n}\n\n.container {\n  display: block;\n  position: relative;\n  margin: 0 auto;\n  width: 100%;\n}\n\n.page-container {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n}\n\n.page {\n  position: relative;\n  width: 100%;\n  max-width: 1410px;\n  margin: 0 auto;\n}\n\n@media only screen and (min-width: 1024px) {\n  .page {\n    width: calc(100% - 100px);\n  }\n}\n\n@media only screen and (min-width: 1260px) {\n  .page {\n    width: calc(100% - 200px);\n  }\n}\n\n@media only screen and (min-width: 1610px) {\n  .page {\n    width: 1410px;\n  }\n}\n\n.main {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 10;\n}\n\n.main-box {\n  position: relative;\n  height: 100%;\n}\n\n.animation-base-container {\n  position: relative;\n  margin: 0 auto;\n}\n\n@media screen and (max-width: 850px) and (min-aspect-ratio: 2 / 1) {\n  .animation-base-container {\n    width: 70%;\n  }\n}\n\n@media screen and (max-width: 850px) and (min-aspect-ratio: 5 / 2) {\n  .animation-base-container {\n    width: 60%;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 4 / 3) {\n  .animation-base-container {\n    width: 80%;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1) {\n  .animation-base-container {\n    width: 70%;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 5 / 2) {\n  .animation-base-container {\n    width: 60%;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 20 / 9) {\n  .animation-base-container {\n    width: 50%;\n  }\n}\n\n.animation-base {\n  display: block;\n  width: 100%;\n  aspect-ratio: 1 / 0.766;\n  z-index: 20;\n}\n\n.animation-target {\n  width: 100%;\n  height: 100%;\n}\n\n.control, .control--single, .control--multiple {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  bottom: 0;\n  left: 0;\n  z-index: 20;\n}\n\n.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 {\n  height: 60px;\n  width: 280px;\n  padding: 15px 20px;\n  color: #fff;\n  background-color: #f42733;\n  border-radius: 30px;\n  border: 0;\n  outline: 0;\n  font-size: 1.8em;\n  font-weight: 700;\n  text-align: center;\n  pointer-events: all;\n  cursor: pointer;\n}\n\n.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 {\n  background-color: #ccc;\n  pointer-events: none;\n}\n\n.control--multiple {\n  width: 100%;\n}\n\n.control--multiple .nav {\n  width: 38%;\n  max-width: 500px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0 auto;\n  padding: 0%;\n}\n\n@media only screen and (min-width: 768px) {\n  .control--multiple .nav {\n    padding: 1% 0;\n  }\n}\n\n@media only screen and (min-width: 1024px) {\n  .control--multiple .nav {\n    padding: 2% 0;\n  }\n}\n\n@media only screen and (min-width: 1260px) {\n  .control--multiple .nav {\n    padding: 3% 0;\n  }\n}\n\n@media only screen and (min-width: 1610px) {\n  .control--multiple .nav {\n    padding: 8px 0;\n  }\n}\n\n@media screen and (min-width: 851px) and (min-aspect-ratio: 2 / 1) {\n  .control--multiple .nav {\n    padding: 10px 0;\n  }\n}\n\n.control--multiple .nav__box {\n  position: relative;\n  width: 25%;\n}\n\n@media only screen and (min-width: 768px) {\n  .control--multiple .nav__box {\n    width: 20%;\n  }\n}\n\n.control--multiple .nav__btn, .control--multiple .nav__btn--prev, .control--multiple .nav__btn--next, .control--multiple .nav__btn--play, .control--multiple .nav__btn--restart {\n  position: relative;\n  width: 100%;\n  border: 0;\n  outline: 0;\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  aspect-ratio: 1 / 1;\n}\n\n.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 {\n  width: 100%;\n}\n\n.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 {\n  pointer-events: none;\n  filter: grayscale(1);\n}\n\n.control--multiple .nav__btn--play > img {\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.control--multiple .nav__btn--play > .stop {\n  display: none;\n}\n\n.control--multiple .nav__btn--play.is-play > .play {\n  display: none;\n}\n\n.control--multiple .nav__btn--play.is-play > .stop {\n  display: block;\n}\n\n.control--multiple .nav__btn--restart {\n  display: none;\n  position: absolute;\n  width: 320%;\n  aspect-ratio: 4 / 1;\n  transform: translate(0, 10%);\n}\n\n.control--multiple .nav__btn--restart > img {\n  display: block;\n  width: 100%;\n  transform: translate(5%, 10%);\n}\n\n.control--multiple.narrow .nav {\n  width: 45%;\n  margin-left: 8%;\n}\n\n.control--multiple.narrow .nav__box {\n  width: 18%;\n}\n\n@media only screen and (min-width: 768px) {\n  .control--multiple.narrow .nav__box {\n    width: 14%;\n  }\n}\n\n.control--multiple.narrow .nav__btn--restart {\n  transform: translate(-60%, 120%);\n}\n","@charset \"UTF-8\";\r\n\r\n// =======================================\r\n// setting\r\n// =======================================\r\n\r\n// color\r\n$col-red: #f42733;\r\n$col-cyan: #03b8df;\r\n\r\n// font\r\n$font-base: Meiryo, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;\r\n\r\n\r\n// media query\r\n\r\n@mixin mq_h_max {\r\n  @media only screen and (max-height: 767px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_w_max {\r\n  @media only screen and (max-height: 1023px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_sm {\r\n  @media only screen and (min-width: 560px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_md {\r\n  @media only screen and (min-width: 768px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_lg {\r\n  @media only screen and (min-width: 1024px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_xl {\r\n  @media only screen and (min-width: 1260px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_xxl {\r\n  @media only screen and (min-width: 1610px) {\r\n    @content\r\n  }\r\n};\r\n\r\n@mixin mq_sp_portrait {\r\n  @media screen and (max-width: 850px) and (orientation: portrait) {\r\n    @content\r\n  }\r\n}\r\n\r\n\r\n@mixin mq_sp_landscape {\r\n  @media screen and (max-width: 850px) and (min-aspect-ratio: 4/3) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_sp_landscape_low_height {\r\n  @media screen and (max-width: 850px) and (min-aspect-ratio: 2/1) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_sp_landscape_xlow_height {\r\n  @media screen and (max-width: 850px) and (min-aspect-ratio: 5/2) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_low_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 4/3) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_xlow_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 2/1) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_xxlow_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 5/2) {\r\n    @content\r\n  }\r\n}\r\n\r\n@mixin mq_xxxlow_height {\r\n  @media screen and (min-width: 851px) and (min-aspect-ratio: 20/9) {\r\n    @content\r\n  }\r\n}\r\n\r\n","@charset \"UTF-8\";\r\n\r\n// ==============================================================================\r\n// module\r\n// ==============================================================================\r\n\r\n// ------------------------------------------------------------------------------\r\n// container\r\n// ------------------------------------------------------------------------------\r\n.container {\r\n  display: block;\r\n  position: relative;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n}\r\n\r\n","@charset \"UTF-8\";\r\n\r\n.page-container {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n  height: 100vh;\r\n}\r\n\r\n.page {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 1410px;\r\n  margin: 0 auto;\r\n\r\n  @include mq_lg {\r\n    width: calc(100% - 100px);\r\n  }\r\n\r\n  @include mq_xl {\r\n    width: calc(100% - 200px);\r\n  }\r\n\r\n  @include mq_xxl {\r\n    width: 1410px;\r\n  }\r\n}\r\n\r\n.main {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 10;\r\n}\r\n\r\n.main-box {\r\n  position: relative;\r\n  height: 100%;\r\n}\r\n","@charset \"UTF-8\";\r\n\r\n// ==============================================================================\r\n// animation controls\r\n// ==============================================================================\r\n\r\n.animation-base-container {\r\n  position: relative;\r\n  margin: 0 auto;\r\n\r\n  @include mq_sp_landscape_low_height {\r\n    width: 70%;\r\n  }\r\n\r\n  @include mq_sp_landscape_xlow_height {\r\n    width: 60%;\r\n  }\r\n\r\n  @include mq_low_height {\r\n    width: 80%;\r\n  }\r\n\r\n  @include mq_xlow_height {\r\n    width: 70%;\r\n  }\r\n\r\n  @include mq_xxlow_height {\r\n    width: 60%;\r\n  }\r\n\r\n  @include mq_xxxlow_height {\r\n    width: 50%;\r\n  }\r\n}\r\n\r\n\r\n// ------------------------------------------------------------------------------\r\n// base\r\n// ------------------------------------------------------------------------------\r\n\r\n.animation-base {\r\n  display: block;\r\n  // position: absolute;\r\n  width: 100%;\r\n  aspect-ratio: 1 / 0.766;\r\n  // height: calc(100% + 70px);\r\n  // top: -70px;\r\n\r\n  z-index: 20;\r\n}\r\n\r\n.animation-target {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.control {\r\n  position: absolute;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 100%;\r\n  bottom: 0;\r\n  left: 0;\r\n  z-index: 20;\r\n}\r\n\r\n// ------------------------------------------------------------------------------\r\n// single\r\n// ------------------------------------------------------------------------------\r\n.control--single {\r\n  @extend .control;\r\n\r\n  .nav__btn {\r\n    height: 60px;\r\n    width: 280px;\r\n    padding: 15px 20px;\r\n    color: #fff;\r\n    background-color: $col-red;\r\n    border-radius: 30px;\r\n    border: 0;\r\n    outline: 0;\r\n    font-size: 1.8em;\r\n    font-weight: 700;\r\n    text-align: center;\r\n    pointer-events: all;\r\n    cursor: pointer;\r\n\r\n    &.start {\r\n      background-color: #ccc;\r\n      pointer-events: none;\r\n    }\r\n  }\r\n}\r\n\r\n\r\n// ------------------------------------------------------------------------------\r\n// multiple (scene)\r\n// ------------------------------------------------------------------------------\r\n.control--multiple {\r\n  @extend .control;\r\n\r\n  width: 100%;\r\n  \r\n  .nav {\r\n    width: 38%;\r\n    max-width: 500px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin: 0 auto;\r\n    padding: 0%;\r\n\r\n    @include mq_md {\r\n      padding: 1% 0;\r\n    }\r\n\r\n    @include mq_lg {\r\n      padding: 2% 0;\r\n    }\r\n\r\n    @include mq_xl {\r\n      padding: 3% 0;\r\n    }\r\n\r\n    @include mq_xxl {\r\n      padding: 8px 0;\r\n    }\r\n\r\n    @include mq_xlow_height {\r\n      padding: 10px 0;\r\n    }\r\n  }\r\n\r\n  .nav__box {\r\n    position: relative;\r\n    width: 25%;\r\n\r\n    @include mq_md {\r\n      width: 20%;\r\n    }\r\n  }\r\n\r\n  .nav__btn {\r\n    position: relative;\r\n    width: 100%;\r\n    border: 0;\r\n    outline: 0;\r\n    cursor: pointer;\r\n    user-select: none;\r\n    background-color: transparent;\r\n    aspect-ratio: 1 / 1;\r\n\r\n    img {\r\n      width: 100%;\r\n    }\r\n\r\n    &.disable {\r\n      pointer-events: none;\r\n      filter: grayscale(1);\r\n    }\r\n  }\r\n\r\n  .nav__btn--prev {\r\n    @extend .nav__btn;\r\n  }\r\n\r\n  .nav__btn--next {\r\n    @extend .nav__btn;\r\n  }\r\n\r\n  .nav__btn--play {\r\n    @extend .nav__btn;\r\n\r\n    >img {\r\n      position: absolute;\r\n      display: block;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    >.stop {\r\n      display: none;\r\n    }\r\n\r\n    &.is-play {\r\n      >.play {\r\n        display: none;\r\n      }\r\n\r\n      >.stop {\r\n        display: block;\r\n      }\r\n    }\r\n  }\r\n\r\n  .nav__btn--restart {\r\n    @extend .nav__btn;\r\n\r\n    display: none;\r\n    position: absolute;\r\n    width: 320%;\r\n    aspect-ratio: 4 / 1;\r\n    transform: translate(0, 10%);\r\n\r\n    >img {\r\n      display: block;\r\n      width: 100%;\r\n      transform: translate(5%, 10%);\r\n    }\r\n  }\r\n\r\n  // width narrow\r\n  &.narrow {\r\n\r\n    .nav {\r\n      width: 45%;\r\n      margin-left: 8%;\r\n    }\r\n\r\n    .nav__box {\r\n      width: 18%;\r\n  \r\n      @include mq_md {\r\n        width: 14%;\r\n      }\r\n    }\r\n\r\n    .nav__btn--restart {\r\n      transform: translate(-60%, 120%);\r\n    }\r\n  }\r\n}\r\n"]}