@charset "UTF-8";
/* CSS Document */



@media (max-width:400px){

	
	
	#fadein {opacity : 0;
             transform: translateY(20px);
             transition: all 1s;}
	 
	  header#header{width: 100%;
	              height: 55px;
	              position: relative;
	              top:0px}
	.header-logo img{width: 50%;}
	
	.logo        {display: block;
                  margin-left: auto;
                  margin-right: auto;}
	
	div.containers{width: 100%;
	              height: 1500px;
	              position: relative;
	              margin: 0 auto;
	              font-family:"Lucida Sans Unicode", "Lucida Grande", "sans-serif";
	              }
	
	div.contents{width:100%;
	             height:100%;
	             margin: 0 auto;
	             }
	
	div.door-img{position: relative;
	             margin-top:0px;
	             height:600px;
		         width: 90%;
		         margin:  0 auto;
	             background-color: aliceblue}
	.door-img p{position: absolute;
	           color:#252525;
	           bottom:105px;
	           left:1.5%;
	           font-size: 20px;
	           letter-spacing: 0.05em}
	.door-img p2{position: absolute;
	             color: #252525;
	             bottom: 110px;
	             left: 1.9%;
	             font-size: 14px}
	.door-img p3{position: absolute;
	             color: #252525;
	             bottom: 35px;
	             left: 1.5%;
		         font-size: 15px
	             }
	.door-img img{width:100%}
	
	
	
	
	
	
	
	div.into{width: 100%;
	         height: 350px;
	         margin-top: 100px;
	         }
	.into p1{font-size: 13.5px;
	         line-height: 50px;
	         position:relative;
	         top: 24px;}
	.into h1{font-size: 15px;
		     position: relative;
	         top: 18px; }
	
	.back{width: 60%;
	      position: absolute;
	      left:20%;}
	
	
	div.visual-into{width: 90%;
	                height: 1550px;
	                margin: 0 auto;
	                margin-top: 100px}
	
	.visual-into h1{font-size: 16px;
	                text-align: center}
	
	.flame{width:  100%;
	       margin-top: 80px}
	
	
	
	.a{width: 80%;
	   position: relative;
	   top: -210px;
	   height:70px ;
	   
	   margin: 0 auto}
	
	.a p2{font-size:12.5px ;
	      letter-spacing: 0.2em}
	
	.flame2{width: 100%;
	        margin-top: 0px}
	
	.b{width: 80%;
	   position: relative;
	   top: -210px;
	   height:70px ;
	   margin: 0 auto}
	
	.b p2{font-size:12.5px ;
	      letter-spacing: 0.2em}
	
	
	.flame3{width: 100%;
	        margin-top: 0px}
	
	
	.c{width: 80%;
	   position: relative;
	   top: -210px;
	   height:70px ;
	   margin: 0 auto}
	
	.c p2{font-size:12.5px ;
	      letter-spacing: 0.2em}
	
	
	.flame4{width: 100%;
	        margin-top: 0px}
	
	
	
	.d{width: 80%;
	   position: relative;
	   top: -210px;
	   height:70px ;
	   margin: 0 auto}
	
	.d p2{font-size:12.5px ;
	      letter-spacing: 0.2em}
	
	
	
	
	.dia{width: 78%;
		 margin: 0 auto;
	     font-size:12.5px ;
	     letter-spacing: 0.18em}
	
	.shiryo{position: relative;
		    widows: 80%;
	        height: 100px;
	        margin-left: 60px;
	        margin-top: -180px;
	        margin-bottom: 80px}
	.shiryo img{width: 80%;
	            }

	
	
	div.question{width: 85%;
	             height: 170px;
		         margin: 0 auto;
		         margin-top:80px;
	             z-index: 22}
		         
	.question p1{z-index: 20;
	             position: relative;
	             color:#FFFFFF;
	             font-size: 30px;
	             left:93px;
	             top: 10px;}
	
	.button{width: 85%;
	       position: absolute}

	
	
	
	.footer{height: 70px;
	        margin-top: 50px;
	        text-align: center}
	
	.foot{width: 15%}
	
	.ya{width:  5%;
	    margin-left: 166px;
	    margin-top: 60px}
	
}
	

@media (min-width:401px){
	
	
}