/*
  Copyright 2020 Roland Corporation. All rights reserved.
*/

:root {
  /* theme */
  --color-primary: #E91E63;
  --color-secondary: #5e0d28;
  --color-highlight: #9f2332;
  --color-highlight-darken: #570b24;
  --color-green: #E91E63;
  --color-green-darken-1: #E91E63;
  --color-green-darken-2: #000000;
  --color-gray-lighten: #9b9b9b;
  --color-gray: #4a4a4a;
  --color-gray-darken: #3d2121;
  --color-white: #ffffff;
  --color-white-op-1: rgba(255, 255, 255, 0.5);
  --color-white-darken: #d8d8d8;
  --color-black: #000000;
  --color-black-lighten: #292121;
  /* width, hegith */
  --width-page: 320px;
  --height-page: 504px;
  --height-header: 44px;
  --height-footer: 44px;
}

* {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body {
  font: 12pt RobotoCondensedBold, NotoSansjpRegular;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
}

div {
  -webkit-overflow-scrolling: touch;
}

#layout-wrapper {
  position: relative;
  clear: both;
  width: 100%;
  height: 100%;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideIn {
  0% {
    left: 320px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes slideIn {
  0% {
    left: 320px;
  }
  100% {
    left: 0;
  }
}

/* webkit scroll bar design */
/*
  ::-webkit-scrollbar {
    width: 16px;
    background-color: black;
  }
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ccc;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #aaa;
  }
  */