@charset "utf-8";
/* CSS Document */
/*-------------------------------------------------------------------
　リセットCSS + サイト共通設定
------------------------------------------------------------------------------*/
/* 全ての要素に対する余白初期値設定 */
body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,
table,th,td,
form,select,option,input
address,pre,strong,em,iframe,img{
	margin:0;
	padding:0;
	font-size:100%;
	font-style: normal;
	font-weight: normal;
	line-height: 1.5;
	border:0;
}
/* デフォルト文字設定 */
body{
	color: #000000;
	background: #FFFFFF;
	line-height: 1.5;
		font-size: 13px;
    font-family:
    	Verdana, Arial,
    	'ヒラギノ角ゴ Pro W3',
    	'Hiragino Kaku Gothic Pro',
    	Osaka,
    	'ＭＳ Ｐゴシック',
    	sans-serif;

}
ul,ol{
	list-style-type:none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* 画像とフォームパーツの上下位置をテキストの真ん中に */
input, select, textarea {
	vertical-align: middle;
}
img {
	border-width: 0px;
	vertical-align: top;
}
/* デフォルトリンク色の設定 */
a {
	color: #ff0055;
	text-decoration: underline;
}
a:visited {
	color: #ff0055;
	text-decoration: underline;
}
a:hover {
	color: #888888;
	text-decoration: none;
}

/* 画像リンクの設定 */
a img{
	opacity:1;
	filter: alpha(opacity=100);
}

.bnr_opacity a:hover img {
	filter: alpha(opacity=70);
    -moz-opacity:0.70;
    opacity:0.70;
}
/*	clearfix
---------------------------------------------------------------------------*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height:0;
}
* html .clearfix { zoom:1; } /*for IE6*/
*:first-child+html .clearfix { zoom:1; } /*for IE7*/
.cb {
	clear: both;
}
/*----------------------------------------------------------------------------------------

　レイアウト

-----------------------------------------------------------------------------------------*/

.content{
	display: block;
	height:900px;
  width:100%;
	position:relative;
	margin:0 auto;
	  ackground-image : url(../images/big-logo.png);
    ackground-size: cover;
 background-color:#242D40;

  }
	@media screen and (max-width:480px){
		.content{
			display: block;
			height:2000px;
		  width:100%;
			position:relative;
			margin:0 auto;
		  background-color:;
		  }}



	.Headline{
  transform: translateX(70%);
  animation: SlideIn-R 	4.9s 1;
	position:absolute;
	z-index: 5;
	margin:25%;
  width:50%;
  background-color:;}

	@media screen and (max-width:480px){
		.Headline{
			transform: translateX(0%);
	  animation: SlideIn-R 	4.9s 1;
		position:absolute;
		z-index: 5;
		margin:50% auto;
		width:100%;
		text-align: center;
	  background-color:;
		}}



.Headline img{
		text-align: center;
	  width:300px;
    height:300px;
   opacity: 0.9;}

@media screen and (max-width:480px){
.Headline img{
	width:300px;
	width:300px;
opacity: 0.9;
}}








@keyframes SlideIn-R {
  0% {
    opacity: 0;
		transform: translateX(-50%);
  }
  100% {
    opacity: 1;
		transform: translateX(70%);
  }}


	@keyframes SlideIn-L {
	  0% {
	    opacity: 0;
			transform: translateX(-50%);
	  }
	  100% {
	    opacity: 1;
			transform: translateX(10%);
	  }}





/* --- 背景の指定 ------------------------------------------- */
.content .bgImg {
margin: 0 auto;
	background-size: cover;
	background-repeat: no-repeat;
	position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
animation  : bgAnime 15s infinite;   /* 4画像 × 各5s = 20s */}







/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.content .src1 {
  background-image : url(../images/bg-1.jpg);/}

.content .src2 {

  background-image : url(../images/bg-2.jpg);
  animation-delay  : 5s;}

.content .src3 {

  background-image : url(../images/bg-3.jpg);
  animation-delay  : 10s;}



@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}
/* --- アニメーションを実行 ----------------- */

    .left{
			transform: translateX(10%);
			animation: SlideIn-L 	4.9s 1;
      z-index: 1;
			position:relative;
			margin:4% auto;
			width:45%;
      float:left;
		  display: flex;
		  justify-content: center;
	    flex-direction: column;
			background-color:;}

    @media screen and (max-width:480px){
    .left{
			transform: translateX(0%);
    width:100%;
		text-align: center;
    display:block;
		margin:150% auto;
    }}


     .logo-1{
			background-color:#EEEEEE;
     opacity: 0.8;
			height:40%;
		margin-top: 10%;
			display:flex;
			border-bottom: solid;
			border-color:#242D40;
		 	}
		 	@media screen and (max-width:480px){
		 	.logo-1{
		   margin:15%;
		 	 width:100%;
			margin:10% auto;
		 	 }}


   .logo-1 img{
		 width:150px;
	   height:150px;
		 margin:5%;
	 }


			.logo-2{
			 opacity: 0.8;
			 background-color:#EEEEEE;
			 	height:40%;
			 display:flex;
			 border-bottom: solid;
			 border-color:#242D40;
			 	}
				@media screen and (max-width:480px){
				.logo-2{
				margin:15%;
				width:100%;
					margin:10% auto;
				}}

				.logo-2 img{
					width:150px;
 			   height:150px;
				 margin:5%;
		 	 }


			  .logo-3{
					opacity: 0.8;
				  background-color:#EEEEEE;
					height:40%;
				 	display:flex;
				 	}
					@media screen and (max-width:480px){
					.logo-3{
					margin:15% auto;
					width:100%;
					border-bottom: solid;
					border-color:#242D40;
					}}


					.logo-3 img{
						width:150px;
 				   height:150px;
					 margin:5%;
							 	  }


       .logo-text{
				 margin:0 auto;
				width:50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
	    background-color:;
      	}

				 .logo-text{
          text-align: center;
				 }
				 .logo-text p{
					 color:;
				 font-size: 15px;
				 }
				 .logo-text h1{
					 margin: 8px;
        font-family: cursive;
				font-size: 22px;
				}


				.enter-link{
					background:#242D40;
					margin:2% auto;
					height:20%;
					width:55%;
					border: solid 1px;
					border-color:black;
				}
				 @media screen and (max-width:480px) {
        .enter-link{
					width:80%;
					}}



				.enter-link a{
       font-size: 25px;
      	color:white;
				text-decoration: none;
        	}

				.enter-link h2{

 			 }

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