@charset "UTF-8";


body{
font-family:'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif !important;
}


select, textarea,input {
border-radius: 5px;
padding: 7px;

}
/* 吹き出し */

.submit_btn{
	padding: 7px;
	margin:2px;
	border-radius: 5px; 
}

.tag{
	padding: 7px;
	margin:2px;
	border-radius: 5px; 
}

img.view {
max-width: 90%;
}

h3 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

h2:first-letter {
  font-size: 2em;
  color: #5ab9ff;
}
.container{
	display: flex;
	margin:10px;
}
.left{
	width: 320px;
	margin:5px;
	padding:5px;
	border: solid 1px #A4A4A4;
	border-radius: 5px;
}
.contents{
	flex: 1;
	margin:6px;
}

.flexbox {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 2em;
}

.flexbox > div {

  flex: 1 0 300px;
  margin: 0.5em;
}

/*文字効果*/

.jump{
  animation: key1 .3s ease infinite alternate;
}

@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

.bau{
 display  : inline-block;
  animation: elasticity 1.5s ease infinite alternate;
}

@keyframes elasticity {

  20% {
    transform: scale3d(1.3, 0.7, 1);
  }

  40% {
    transform: scale3d(0.7, 1.3, 1);
  }

  60% {
    transform: scale3d(1.1, 0.8, 1);
  }

  80% {
    transform: scale3d(0.8, 1.1, 1);
  }

  100%{
    transform: scale3d(1, 1, 1);
  }
}

.big{
  display  : inline-block;
  animation: bigAnime 4s alternate infinite;
}
@keyframes bigAnime{
   0% { transform: scale(1, 1);   }
 100% { transform: scale(2, 0.5); }
}

.rotate span{
  display: inline-block;
  animation: rotate-anime 2s ease-in-out infinite;
}

@keyframes rotate-anime {
 100%{ transform: rotate(360deg) }
}

.buruburu {
    display: inline-block;
    animation: hurueru .1s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.neon {
  display: inline-block;
  color: #fff;
  letter-spacing: .05em;
  text-shadow: 0 1px 5px #FB1684, 0 0 12px #fff, 2px 5px 10px #990a52;
}
.neon > span {
  -webkit-animation: blink 3s infinite alternate;
  animation: blink 3s infinite alternate;
}
@-webkit-keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}
@keyframes blink {
  40% {
    opacity: .85;
  }
  42% {
    opacity: .4;
  }
  43% {
    opacity: .85;
  }
  45% {
    opacity: .4;
  }
  46% {
    opacity: .85;
  }
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

.rotate_x {
  animation: r6 1s linear infinite;
display:inline-block;
}
 
@keyframes r6 {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}
.rotate_y {
  animation: r7 1s linear infinite;
display:inline-block;
}
 
@keyframes r7 {
  200%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.star5 {
  animation: r5 1s linear infinite;
  transform-origin: center bottom;
display:inline-block;
}
 
@keyframes r5 {
  200%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.star8 {
  animation: r8 1s linear infinite;
  transform-origin: left top;
display:inline-block;
}
 
@keyframes r8 {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(360deg); }
}