@charset"UTF-8";

/* メディアスクリーン */
@media screen and (max-width: 1399px){
header:hover{
    color:#FFFFFF;
    top:0px;
    left:0px;
    background-color: rgba(255,255,255,0.8);
    font-weight: bold;
    width:300%;
    height:2000px;
	text-align: left;
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}
    
header:hover div#description{
    display: block;
    font-weight:normal;
    transform:translate(38%,28%);
    -webkit-transform:translate(38%,28%);
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    font-size: 30px;
    line-height: 2.4;
    position:absolute;
}

header:hover{
    color:#FFFFFF;
    top:0px;
    left:0px;
    background-color: rgba(255,255,255,0.9);
    font-weight: bold;
    width:300%;
    height:2000px;
	text-align: left;
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
}

header:hover #title{
    font-size:40px;
    color: black;
    top:3%;
    left:3%;
    position: absolute;
        -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
      text-shadow:none;
}

header:hover img#keylogo{
    height:20%;
    transform:translate(270%,25%);
    -webkit-transition:all 1.5s ease-in-out;
    -ms-transition:all 1.5s ease-in-out;
    transition:all 1.5s ease-in-out;
    position:absolute;
}
img#tuta{
    position:fixed;
    top:68%;
    width:270px;
    left:10px;
     z-index:10000;
    transform:rotate(-20deg);
}
}

/* メディアスクリーン */
@media screen and (min-width : 320px) and (max-width : 1220px){
menu.box{
	font-family: Garamond, Times New Roman, Times, serif;
	text-align: left;
	background-color:rgba(10,210,250,0.7);
	margin-left:0px;
    width:400px;
    height:84%;
    top:12%;
    left:-250px;
    border-radius: 3px;    
    border:1px rgb(190,190,190) solid;
    position: fixed;
    z-index: 10000;
    padding-bottom: 10px;
    padding: 5px;
    float: left;
}    

menu.box:hover {
    	-webkit-transform:translate(220px,0);
	-webkit-transition:all 0.7s ease-in-out;
	transform:translate(220px,0);
    transition:all 0.7s ease-in-out;
}
    
h1.perlfont{
        font-size:24px;
}
img#tuta{
    position:fixed;
    top:76%;
    width:350px;
    left:0px;
    z-index:10000;
}

menu.box2{
	font-family: Garamond, Times New Roman, Times, serif;
	text-align: left;
	background-color:rgba(252,45,104,0.8);
	margin-left:0px;
    top:12%;
    width:400px;
    right:-290px;
  height:84%;
    border-radius: 3px 0 0 3px;    
	border:1px rgb(190,190,190) solid;
    position: fixed;
    z-index: 10000;
    padding-bottom: 5px;
    float: left;
    padding: 20px;
    padding-left: 0px;
}
    
menu.box2:hover {
    	-webkit-transform:translate(-220px,0);
	-webkit-transition:all 0.5s ease-in-out;
	transform:translate(-220px,0);
    transition:all 0.5s ease-in-out;
}

/*メディアスクリーン header transform****************************/
header:hover #title{
    font-size:36px;
    color: black;
    top:3%;
    left:1%;
    position: absolute;
        -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
      text-shadow:none;
}

header:hover img#keylogo{
    height:28%;
    transform:translate(50%,120%);
    -webkit-transition:all 1.5s ease-in-out;
    -ms-transition:all 1.5s ease-in-out;
    transition:all 1.5s ease-in-out;
    position:absolute;
}
    
header:hover div#description{
    display: block;
    font-weight:normal;
    transform:translate(27%,44%);
    -webkit-transform:translate(27%,44%);
    -webkit-transition:all 1s ease-in-out;
    -ms-transition:all 1s ease-in-out;
    transition:all 1s ease-in-out;
    font-size: 30px;
    line-height: 2.2;
    position:absolute;
}

img.floatl_img{
    display: none;
}

div.inquirybox{
    color: white;
	font-family:'Times New Roman',メイリオ;
    position: fixed;
    background-color:rgba(255,255,255,0.4);
    color: black;
    border-radius:2px;
     width:16%;
    top:98%;
    left:49%;
    padding:15px;
    padding-left: 30px;
    border: 1px;
	border:1px rgb(190,190,190) solid;
    z-index: 40000;
    box-shadow:inset 1px 1px 1px 1px rgba(255,255,255,0.4);
}
    
div.shopbox{
    color: white;
	font-family:'Times New Roman',メイリオ;
    position: fixed;
       background-color:rgba(255,255,255,0.4);
    color: black;
    border-radius:2px;
    width:18%;
    height: 200px;
    top:98%;
    left:27.1%;
    padding:15px;
    padding-left: 30px;
    border: 1px;
	border:1px rgb(190,190,190) solid;
    z-index: 40000;
    box-shadow:inset 1px 1px 1px 1px rgba(255,255,255,0.4);
}
}