@charset "utf-8";
/* reset */
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p {
	margin: 0;
	padding: 0;
	font-size: 100%;
	/*********** 明朝font-family ***********/
	/*
	font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','ＭＳ Ｐ明朝','MS PMincho',sans-serif;
	*/

	/*********** ゴシックfont-family ***********/
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

.fluffy {
  animation: fluffy1 3s ease infinite;
}

@keyframes fluffy1 {
  0% { transform:translateY(0) }
  20% { transform:translateY(-15px) }
  40% { transform:translateY(0) }
  60% { transform:translateY(-15px) }
  80% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

.slide_in{
  animation: SlideIn 1.6s ;
}


@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media screen and (min-width: 0px) and (max-width: 480px){
	
		header{
		width: 100%;
		background-image: url("../img/cont_bg.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		}

		header img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		}

	.main_vis{
		width: 100%;
		background-image: url("../img/bg_01.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.main_vis img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}


	.main_vis_2{
		width: 100%;
		background-image: url("../img/bg04.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.main_vis_2 img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.contents{
		background-position: left bottom;
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0 0 0 0;
	}

	.contents img{
		width:100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.sub_cont{
		width: 100%;
		background-image: url("../img/bg02.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

	.sub_cont img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		}

	.sub_cont2{
		width: 100%;
		background: #00bfff;
	}

	.sub_cont2 img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		}

	.sub_cont3{
		width: 100%;
		background-image: url("../img/bg03.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.sub_cont3 img{
		height: auto;
		display: block;
		margin: 0 auto;
		}

	
	form input[type="text"]{
		width: 90%;
		height: auto;
		text-align: center;
		display: block;
		margin: 0 auto;
		line-height: 2.5em;
		font-size: 1em;
		font-weight: 100;
		margin-bottom: 8%;
	}
	
	input::placeholder {
		color: #bbbbbb;
		font-weight: 100;
	}
	
	form input[type="image"],
	.fluffy{
		width: 80% !important;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	footer{
		padding-top: 1%;
		padding-bottom: 1%;
		margin-top:5%;
		background-image: url("../img/bg_01.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}
	
	footer p{
		text-align: center;
		line-height: 1.7em;
		color: #000;
		font-size: 0.6em;
	}
	
	footer p a{
		text-decoration: none;
		color: #000;
	}

	.btn{
		margin-bottom:3%;
	}

	

}


@media screen and (min-width: 480px) {

		header{
		width: 100%;
		background-image: url("../img/cont_bg.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		}

		header img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		}

	.inner{
		max-width: 1000px;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.inner img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	.main_vis{
		background-image: url("../img/bg_01.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.main_vis img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.main_vis_2{
		background-image: url("../img/bg04.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
	
	.main_vis_2 img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}


	.contents{
		background-size: cover;
		background-repeat: no-repeat;
		padding: 0 0 0 0;
		background:#fff;
	}

	.contents img{
		height: auto;
		display: block;
		margin: 0 auto;
	}

	.sub_cont{
		width: 100%;
		background-image: url("../img/bg02.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.sub_cont img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		}

	.sub_cont2{
		width: 100%;
		background: #00bfff;
	}

	.sub_cont2 img{
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		}

	.sub_cont3{
		width: 100%;
		background-image: url("../img/bg03.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.sub_cont3 img{
		height: auto;
		display: block;
		margin: 0 auto;
		}


	.btn{
		margin-bottom:3%;
	}


	
	form input[type="text"]{
		width: 90%;
		height: auto;
		text-align: center;
		display: block;
		margin: 0 auto;
		line-height: 2em;
		font-size: 2em;
		font-weight: 100;
		margin-bottom: 5%;
	}
	
	input::placeholder {
		color: #dddddd;
		font-weight: 100;
	}
	
	form input[type="image"],
	.fluffy {
		width: 80% !important;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	footer{
		background-image: url("../img/bg_01.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		z-index: 100;

	}
	
	footer p{
		text-align: center;
		line-height: 1.7em;
		color: #000;
		font-size: 0.8em;
	}
	
	footer p a{
		text-decoration: none;
		color: #333;
	}

.ring {
	background: rgba(51, 255, 51, 0.8);
	z-index:100;
	position: absolute;
	width: 40%;
	height: 40%;
	border-radius: 150px;
	top: 0%;
	left: 50%;
   	animation: pulsate 1s ease-out;  /* スピードなど */ 
	animation-iteration-count: infinite;
}

@keyframes pulsate {
    0%   { transform: scale(1, 1); }
    50%  { opacity: 1; }
    100% { transform: scale(2.5, 3.5); opacity: 0.0; }
}

}