@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
#slider {
    width: 100%;
    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*========= レイアウトのためのCSS ===============*/

a{
	color: #fff;
}

a:hover,
a:active{
	text-decoration: none;
}

h1{
	position: absolute;
	z-index: 2;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:2.5vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px  2px 3px blue,
            -2px  2px 3px blue,
             2px -2px 3px blue,
            -2px -2px 3px blue;
}

h2{
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:2.5vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px  2px 3px blue,
            -2px  2px 3px blue,
             2px -2px 3px blue,
            -2px -2px 3px blue;
}


h3{
	position: absolute;
	z-index: 3;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size:2.5vw;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 2px  2px 3px blue,
            -2px  2px 3px blue,
             2px -2px 3px blue,
            -2px -2px 3px blue;
}





.wrapper{
	position: relative;
	height: 789px;
	
}

.container{
	background:#555;

	
}

.container p{
	padding: 300px 0;	
	text-align: center;
	color: #fff;
}



/* media query */
@media (max-width:667px) { 
	h1,h2,h3{
		font-size:3vw;
		
	}
	
	
	
}