@charset "UTF-8";
body{
       
  		background-image: url(../jpg/haikei3.png);

}    /*���F�̔w�i */

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

h1,h2 { 	
		padding-top: 100px;
		margin: 0;
		padding: 1em 0;
		text-align: center;
		color: #00000;
		
}


header{
	    position: relative;
	    z-index: 100;
	    background: #000;
	    width: 100%;
	    height: auto;
}


}

a {
  		color: #fff;
		text-transform: uppercase;
		text-decoration: none;

}

ul {
		overflow:hidden;
		list-style:none;
		margin: 0 auto;
		z-index: 20;
		padding: 0;
        
}


ul li {
  		display: inline-block;
  		padding: 20px 10px 10px 10px;
}



ul li:hover {
  		-webkit-transform-origin: left top;
 		-ms-transform-origin: left top;
 		 transform-origin: left top;
  		-webkit-transform: scale(1, 1);
  		-ms-transform: scale(1, 1);
  		transform: scale(1, 1)
}

.spaser{height: 100px;}


.top-image-area{
  		width: 100%;
 	 	height: 300px;
  		background-image: url("../jpg/oko.jpg");
  		background-position: 50% 20%;
  		background-size: cover;
  		margin-top: 60px;

}

.logo-container{
  		width: 70px;
  		height: 70px;
  		margin-left: 10px;

}

.logo-container img{
  		height: 100%;
  		width: 100%;

}

.slanting {
		position: relative;
		height: 200px;
		background: #ddd;

}

svg {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 200px;
		fill: #5f5f5f;
		}



		
.btn4{
  		text-transform: uppercase;
  		text-align: center;
  		position: relative;
  		text-decoration: none;
  		display:inline-block;
  		color:white;
}

.btn4::before {
  		content: '';
  		position: absolute;
  		bottom: -2px;
  		left: 0px;
  		width: 100%;
  		height: 2px;
  		background: #dc143c;
 		display: block;
  		-webkit-transform-origin: right top;
  		-ms-transform-origin: right top;
  		transform-origin: right top;
  		-webkit-transform: scale(0, 1);
  		-ms-transform: scale(0, 1);
  		transform: scale(0, 1);
  		-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
  		transition: transform 0.4s cubic-bezier(1, 0, 0, 1)

}


.btn4:hover::before {
  		-webkit-transform-origin: left top;
  		-ms-transform-origin: left top;
  		transform-origin: left top;
  		-webkit-transform: scale(1, 1);
  		-ms-transform: scale(1, 1);
  		transform: scale(1, 1)
}

.btn2{
  		text-transform: uppercase;
  		text-align: center;
  		position: relative;
  		text-decoration: none;
  		display:inline-block;
  		border-bottom: 2px solid #dc143c;
  		color: white;
}

.indexInfo {
		width: 100%;
		height: auto;
		background-image: url(../jpg/naikan2.jpg);
		background-size: cover;
		margin-top: 60px;
		padding-left: 0;
		}
@media screen and (max-width: 966px){
.indexInfo {
		width: 100%;
		height: auto;
		background-image: url(../jpg/naikan2.jpg);
		background-size: cover;
		margin-top: 122px;
		padding-left: 0;
		}
		}
		
.indexMenu { 
		width: 100%;
		height: auto;
		background-image: url(../jpg/oko3.jpg);
		background-size: cover;
		padding: 40px 0;
		}
		
@media screen and (max-width: 1024px){
.indexMenu { 
		width: 100%;
		height: auto;
		background-image: url(../jpg/oko3.jpg);
		background-size: cover;
		padding: 40px 0;
		}
	}
.indexMessage { 
		width: 100%;
		height: auto;
		background-image: url(../jpg/okonomiyaki3.jpg);
		background-size: cover;
		padding: 40px 0;
		}
		
@media screen and (max-width: 1024px){
.indexMessage { 
		width: 100%;
		height: auto;
		background-image: url(../jpg/okonomiyaki3.jpg);
		background-size: cover;
		padding: 40px 0;
		}
		}
		
.indexAccess { 
		width: 100%;
		height: auto;
		background-image: url(../jpg/gaikan3.jpg);
		background-size: cover;
		padding: 40px 0px;
		}
		
@media screen and (max-width: 1024px){
.indexAccess { 
		width: 100%;
		height: auto;
		background-image: url(../jpg/gaikan3.jpg);
		background-size: cover;
		padding: 40px 0px;
		}
		}