html {font-size: 625%;}

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
}

body {
	font-family:"メイリオ", Meiryo, sans-serif;
	font-style: normal;
	line-height: 1.5em;
	font-size: 14px;
	font-weight: 400;
	color:#2f2e33;
	width: 100%;
	display: flex;
	box-shadow: 1px 1px 2px #50a3a2;
	background: #f3f2f1;
	/* background: -webkit-linear-gradient(top left,#5058a3 0%,#53b8e3 100%);
	background: -moz-linear-gradient(top left,#5058a3 0%,#53b8e3 100%);
	background: -o-linear-gradient(top left,#5058a3 0%,#53b8e3 100%);
	background: linear-gradient(to bottom right,#5058a3 0%,#53b8e3 100%);
	background: linear-gradient(to bottom right,#7ECAF7 0%,#1D0000 100%);
	background: linear-gradient(to bottom right,#1C144E 0%,#1D0000 100%); */
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	background:linear-gradient(to right, #00dbde,#fc00ff) !important;
	animation: fadein 1.5s forwards;
}
.container {
	width: calc(100% - 165px - 10em);
	margin: 15px auto;
	background: rgba(255, 255, 255, 0.95);
	padding: 2em;
	z-index: 2;
	margin-left: calc(190px + 3em);
	min-height: calc(100vh - 86px);
	border-radius: 5px;
	box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
}

button{
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}
textarea,
select,
input[type="url"],
input[type="search"],
input[type="datetime-local"],
input[type="time"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="text"],
input[type="password"]{
  border: 1px solid #ccc;
  text-align: left;
  width:calc(100% - 2px - 1em);
  padding: 0.5em 0.5em;
	vertical-align: middle;
	color:#2f2e33;
}
select {
	color:#5058a3;
	width:calc(100% - 2px);
}
input[type="search"]{
  width:100%;
}
input[type="checkbox"]{
	width:15px;
	height:15px;
	vertical-align: middle;
	border: 1px solid #2f2e33;
	-webkit-appearance:auto !important;
}

input[type="radio"]{
	width:15px;
	height:15px;
	vertical-align: top;
	border: 1px solid #2f2e33;
	-webkit-appearance:auto !important;
}

@media screen and (max-width: 767px) {
}
.preview {
}

@keyframes fadein {
	0% {opacity: 0.2}
	100% {opacity: 1}
}


.bg-bubbles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: none;
  }
  .bg-bubbles li {
	  position: absolute;
	  list-style: none;
	  display: block;
	  width: 40px;
	  height: 40px;
	  border-radius: 100%;
	  background-color: rgba(0,0,0,0.1);
	  top: -160px;
	  -webkit-animation: square 25s infinite;
	  animation: square 25s infinite;
	  -webkit-transition-timing-function: linear;
	  transition-timing-function: linear;
  }
  .bg-bubbles li:nth-child(1) {
	left: 10%;
  }
  .bg-bubbles li:nth-child(2) {
	left: 20%;
	width: 80px;
	height: 80px;
	animation-delay: 2s;
	animation-duration: 17s;
  }
  .bg-bubbles li:nth-child(3) {
	left: 25%;
	animation-delay: 4s;
  }
  .bg-bubbles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-duration: 22s;
	background-color: rgba(255,255,255,0.25);
  }
  .bg-bubbles li:nth-child(5) {
	left: 70%;
  }
  .bg-bubbles li:nth-child(6) {
	left: 80%;
	width: 120px;
	height: 120px;
	animation-delay: 3s;
	background-color: rgba(255,255,255,0.2);
  }
  .bg-bubbles li:nth-child(7) {
	left: 32%;
	width: 160px;
	height: 160px;
	animation-delay: 7s;
  }
  .bg-bubbles li:nth-child(8) {
	left: 55%;
	width: 20px;
	height: 20px;
	animation-delay: 15s;
	animation-duration: 40s;
  }
  .bg-bubbles li:nth-child(9) {
	left: 25%;
	width: 10px;
	height: 10px;
	animation-delay: 2s;
	animation-duration: 40s;
	background-color: rgba(255,255,255,0.3);
  }
  .bg-bubbles li:nth-child(10) {
	left: 90%;
	width: 160px;
	height: 160px;
	animation-delay: 11s;
  }
  @-webkit-keyframes square {
	0% {
	  transform: translateY(0);
	}
	100% {
	  transform: translateY(700px) rotate(600deg);
	}
  }
  @keyframes square {
	0% {
	  transform: translateY(0);
	}
	100% {
	  transform: translateY(700px) rotate(600deg);
	}
  }
  
  /* animation */
@keyframes korokoro {
	0%   { transform: translate(0%, 0%); }
	3%   { transform: translate(10%, 0%) rotate(10deg); }
	12%  { transform: translate(20%, 0%) rotate(20deg); }
	15%  { transform: translate(-10%, 0%) rotate(-10deg); }
	17%  { transform: translate(-15%, 0%) rotate(-15deg); }
	22%  { transform: translate(10%, 0%) rotate(10deg); }
	25%  { transform: translate(15%, 0%) rotate(15deg); }
	30%  { transform: translate(-5%, 0%) rotate(-5deg); }
	32%  { transform: translate(-7%, 0%) rotate(-7deg); }
	37%  { transform: translate(0%, 0%) rotate(0deg); }
	50% { transform: translate(0%, 0%) rotate(0deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes purupuru {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	5%  { transform: scale(1.0, 1.06) translate(-5%, -4%) skew(6deg, 0deg); }
	12%  { transform: scale(1.0, 0.94) translate(5%, 4%) skew(-6deg, 0deg); }
	17%  { transform: scale(1.0, 1.03) translate(2%, -2%) skew(-3deg, 0deg); }
	20%  { transform: scale(1.0, 0.97) translate(-2%, 2%) skew(3deg, 0deg); }
	25% { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}

@keyframes poyon {
	0%   { transform: scale(0.8, 1.4) translate(0%, -100%); }
	10%  { transform: scale(0.8, 1.4) translate(0%, -15%); }
	20%  { transform: scale(1.4, 0.6) translate(0%, 30%); }
	30%  { transform: scale(0.9, 1.1) translate(0%, -10%); }
	40%  { transform: scale(0.95, 1.2) translate(0%, -30%); }
	50%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }
  @keyframes poyooon {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	10%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	40%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
	50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	60%  { transform: scale(0.9, 1.2) translate(0%, -100%); }
	75%  { transform: scale(0.9, 1.2) translate(0%, -20%); }
	85%  { transform: scale(1.2, 0.8) translate(0%, 15%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }
  @keyframes purun {
	0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
	15%  { transform: scale(0.9, 0.9) translate(0%, 5%); }
	30%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
	50%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
	70%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  }