@charset "utf-8";

/*YUI CSS3のバグ対策---*/
html {
  background-color: transparent;
  background-image: none;
  margin:0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　Stracture
 - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body{
margin:0;
font-size:14px;
background-color: #fff;
background-image: url(../images/bg.jpg);
background-repeat:repeat;
}

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

nav img{
	width:80%
}

div img,header img{
}

h1,h2,h3,h4,dl,dt,dd{
margin:0;
padding:0
}

h1{
position:absolute;
right:30px;
top:100px
}

h2{
text-align:center
}

ul,li{
list-style:none;
padding:0;
margin:0
}

section{
padding:100px 0;
position:relative;
}

header{
position:relative
}

p{
margin:0;
padding:0
}

.mgt05{
margin-top:5px!important
}

.mgt22{
margin-top:22px!important
}

.mgt25{
margin-top:25px!important
}

.mgt55{
margin-top:55px!important
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　position
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
.top {
	position: relative;
	overflow:hidden;
}

.top1 {
	position: absolute;
	top:0%;
	width:100%;
}

.top2 {
	position: absolute;
	top:0%;
	width:100%;
}

.top3 {
	position: absolute;
	top:0%;
	width:100%;
}


.signup {
	position: relative;
	overflow: hidden;
}


.second {
	position: relative;
	overflow:hidden;
}

.second1 {
	position: absolute;
	top:15%;
	width:100%;
}
.second2 {
	position: absolute;
	top:33%;
	width:100%;
}
.second3 {
	position: absolute;
	top:51%;
	width:100%;
}
.second4 {
	position: absolute;
	top:56%;
	width:100%;
}



.third {
	position:relative;
	overflow:hidden;
}

.third1 {
	position:absolute;
	top:20%;
}
.third2 {
	position:absolute;
	top:33%;
}
.third3 {
	position:absolute;
	top:46%;
}

.third4 {
	position:absolute;
	top:59%;
}


.fifth {
	position: relative;
	overflow: hidden;
}

.fifth1 {
	position: absolute;
	top: 30%;
}

.fifth2 {
	position: absolute;
	top: 65%;
}

.sixth {
	position: relative;
	overflow: hidden;
}

.sixth1 {
	position: absolute;
	top: 20%;
}

.sixth2 {
	position: absolute;
	top: 34%;
}

.sixth3 {
	position: absolute;
	top: 48%;
}

.sixth4 {
	position: absolute;
	top: 20%;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　scroll-animation
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* ------------- スクロールフェードインDown用 ------------- */
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインDown用 END ------------- */

/* ------------- スクロールフェードインUP用 ------------- */
.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインUP用 END ------------- */
/* ------------- スクロールフェードインスライド右→左 ------------- */
.righttoleft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: righttoleft;
 animation-name: righttoleft;
 visibility: visible !important;
}
@-webkit-keyframes righttoleft {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes righttoleft {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド右→左2秒バージョン ------------- */
.righttoleft2 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: righttoleft2;
 animation-name: righttoleft2;
 visibility: visible !important;
}
@-webkit-keyframes righttoleft2 {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes righttoleft2 {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド右→左3秒バージョン ------------- */
.righttoleft3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: righttoleft3;
 animation-name: righttoleft3;
 visibility: visible !important;
}
@-webkit-keyframes righttoleft3 {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes righttoleft3 {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド右→左 ------------- */

/* ------------- スクロールフェードインスライド右→左 END ------------- */

/* ------------- スクロールフェードインスライド左→右 ------------- */
.lefttoright {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: lefttoright;
 animation-name: lefttoright;
 visibility: visible !important;
}
@-webkit-keyframes lefttoright {
 0% { opacity: 0; -webkit-transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes lefttoright {
 0% { opacity: 0; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド左→右 END ------------- */

/* ------------- スクロールフェードインスライド左→右（3秒） ------------- */
.lefttoright3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: lefttoright3;
 animation-name: lefttoright3;
 visibility: visible !important;
}
@-webkit-keyframes lefttoright3 {
 0% { opacity: 0; -webkit-transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes lefttoright3 {
 0% { opacity: 0; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド左→右 （3秒） END ------------- */




/* ------------- スクロールフェードイン回転時計回り ------------- */
.rotation-r {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: rotation-r;
 animation-name: rotation-r;
 visibility: visible !important;
}
@-webkit-keyframes rotation-r {
 0% { opacity: 0; -webkit-transform: rotate(0deg); }
 50% { opacity:0.5; -webkit-transform: rotate(-180deg) scale(1.2);}
 100% { opacity: 1; -webkit-transform: rotate(360deg) scale(1); }
}
@keyframes rotation-r {
 0% { opacity: 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
 50% { opacity:0.5; -webkit-transform: rotate(-180deg) scale(1.2);}
 100% { opacity: 1; -webkit-transform:rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) scale(1); }
}
/* ------------- スクロールフェードインスライド左→右 END ------------- */


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　Common
- - - - - - - - - - - - - - - - - - - - - - - - - - - */
#wrap{
	margin:0 auto;
	max-width:750px
}

.cvr{
	position:relative
}

.btnLine{
	position:absolute;
	bottom:0.5%	
}

.btnLine2{
	position:absolute;
	bottom:3%	
}

.btnLineTop{
	position:absolute;
	top:0.5%		
}

.arrow{
	position:absolute;
	bottom:19%	
}

footer{
	background: #FEFABD;
	height:50px;
}
footer p {
	color:#4C7699;
	text-align:center;
	font-size:xx-small;
	padding-top:10px;
	
}


.center {
	text-align:center;
	margin:0 auto;
}

.bspace {
	margin-top: 20px;
	margin-bottom: 20px;
}

.bspace2 {
	padding-top: 20px;
	padding-bottom: 20px;
}


/*---Infoページ---*/

.info p {
	padding:10px 5px;
    border-bottom: 1px solid #e4e4e4;
    color: #555441;
}
.info {
	height:250px;
}
.wide {
	height:80px;
}
.infopage {
	margin-top:20px;
}
.bold {
	font-weight:bold;
}

.tothetop a {
	text-decoration:none;
	font-weight:700;
	color:#36C;
}


/*---アニメーションボタン---*/

/*---ふるふる---*/
.animationBtn a{
	/*---デザイン---*/
	display: block;
	width: 90%;
	text-align: center;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	/*アニメーション*/
	animation: animScale 3s infinite ease-out;
	transform-origin: 50% 50%;
	animation-play-state:running;
}	

@keyframes animScale {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

/*---ふるふる---*/
.furu{
	/*---デザイン---*/
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	/*アニメーション*/
	animation: animScale 3s ease-out;
	transform-origin: 50% 50%;
	animation-play-state:running;
	animation-delay: 1s;
}	

@keyframes animScale2 {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}


/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s 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;}
}

/*　Swing */

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  animation: swing linear 2s infinite
}