@charset "UTF-8";
/******************************************************************

Stylesheet: ベーススタイル

******************************************************************/
body {
  font-family: "Kameron", "Noto Sans JP", sans-serif;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

.font-sm {
  font-size: 14px;
}

.font-md {
  font-size: 17px;
}

.font-lr {
  font-size: 23px;
}

.font-lg, h1, .btn-flat {
  font-size: 25px;
}

.mb-sm, .inputform {
  margin-bottom: 16px !important;
}

.mb-lg, .preview {
  margin-bottom: 80px !important;
}

.pb-sm {
  padding-bottom: 16px !important;
}

.pb-lg {
  padding-bottom: 80px !important;
}

.content-width, .container {
  width: 90%;
  margin: 0 auto;
  max-width: 1070px;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

body {
  color: #000;
  background: #fff;
}

.container {
  text-align: center;
}

h1 {
  color: #364e96;
  /*文字色*/
  border: none;
  /*線色*/
  padding: 0.5em;
  /*文字周りの余白*/
}

.explanation {
  width: 100%;
  text-align: left;
}

.preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 500px !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#video {
  background: #ffc;
  z-index: 100;
  position: absolute;
  width: 430px;
  height: 320px;
}

#canvas {
  background: #cff;
  z-index: 200;
  position: absolute;
  width: 430px;
  height: 320px;
}

#error-message {
  color: #f00;
}

ul, ol {
  background: #dadada;
  /*灰色に*/
  border-radius: 8px;
  -webkit-box-shadow: 0px 0px 5px silver;
          box-shadow: 0px 0px 5px silver;
  padding: 0.5em 0.5em 0.5em 2em;
}

ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.btn-flat {
  margin-right: 20px;
  border-color: black;
  border-radius: 10px;
}

@media (min-width: 480px) {
  /******************************************************************

Stylesheet: 480px以上(スマホの横向き)のモニタで適用

******************************************************************/
}

@media (min-width: 600px) {
  /******************************************************************

Stylesheet: 600px以上のタブレットやモニタで適用

******************************************************************/
}

@media (min-width: 960px) {
  /******************************************************************

Stylesheet: 960px以上のモニタで適用

******************************************************************/
}

@media (min-width: 1280px) {
  /******************************************************************

Stylesheet: 1280px以上のモニタで適用

******************************************************************/
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /******************************************************************

Stylesheet: Retinaディスプレイで適用

******************************************************************/
  /* 

EXAMPLE 
.icon {
	background: url(images/test@2x.png) no-repeat;
	background-size: 24px 24px;
}

*/
}

@media print {
  /******************************************************************

Stylesheet: プリンタのみに適用

******************************************************************/
}
/*# sourceMappingURL=style.css.map */