@charset "UTF-8";

body {
  background: url("../../images/bg.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}









@media screen and (min-width:1024px) {
.smp{
display:none;
}
.tablet{
display:none;
}
.pc{
display:block;
}
img.grow{
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
img.grow:hover{
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
}
.frame{
height:100vh;
text-align:center;
position:relative;
}
.inner{
position:absolute;top:50%;
left:50%;
transform:translate(-50%,-50%);
width:50%;
}
h1{
width:30%;
margin:0 auto 30px;
}
ul{
}
ul li{
width:21%;
margin:2%;
float:left;
}
h6{
width:20%;
margin:30px auto 0;
}


}









@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
.frame{
height:100vh;
text-align:center;
position:relative;
}
.inner{
position:absolute;top:50%;
left:50%;
transform:translate(-50%,-50%);
width:80%;
}
h1{
width:30%;
margin:0 auto 30px;
}
ul{
}
ul li{
width:21%;
margin:2%;
float:left;
}
h6{
width:20%;
margin:30px auto 0;
}





}








@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
.tablet{
display:none;
}
.smp{
display:block;
}
.frame{
height:100vh;
text-align:center;
position:relative;
}
.inner{
position:absolute;top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
}
h1{
width:40%;
margin:0 auto 30px;
}
ul{
}
ul li{
width:30.3%;
margin:1.5%;
float:left;
}
h6{
width:20%;
margin:20px auto 0;
}







}