/*
Theme Name: riquid squere
Author: okazaki sayuri
*/
 <style type="text/css">
 
/*-----------
font
-------------*/    
   
@font-face {
    font-family: 'IM Fell English', serif;
    src: url('http://fonts.googleapis.com/css?family=IM+Fell+English');
 }
 	
.fontA{
	font-family:'IM Fell English', "TakaoEX明朝","TakaoExMincho","ＭＳ Ｐ明朝","MS PMincho","ＭＳ 明朝","MS Mincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro", serif;
	text-align: center;
	color: #353232;
	font-size: 15px;
	font-weight: 300;
	letter-spacing: 1px;
	}
.font-title{
	font-family: 'Geo', sans-serif;
	font-size: 12pt;
}
.font-title_jp{
	font-family: sans-serif;
	font-size: 10pt;
	font-weight: 500;
	}
/*-----------
reset
-------------*/    
 
a{
	text-decoration: none;
	}
	  
html,body{
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    background-color: #ffffff;
    text-align: center;
    }

img { 
	border-style:none; 
		}

a img{ 
	border-style:none; 
	}
	
header a {color:#adadad; text-decoration:none; }	
header a:link {color:#adadad; text-decoration:none; }
header a:visited {color:#adadad; text-decoration:none; }
header a:hover {color:#525252; text-decoration:none;}
header a:active {color:#adadad; text-decoration:none;}	
	
/*-----------
layout
-------------*/  
#title{
	margin-top: 0;
	margin-left: 5px;
	position: fixed;
	text-align: left;	
	color: #e6e6e6;
	}
#wrapper{
	width:60%;
	margin:0 auto;
	padding-top:20%;
	}	
div.box img {
	visibility:visible;
	width: 100px;
	height: 100px;
	opacity: 1;
	}
div.box2 img {
	visibility:visible;
	width: 45px;
	height: 45px;
	opacity: 1;
	}
	
div.box {	
	float: left;
	margin: 5px;
	width: 100px;
	height: 100px;
	position: relative;
	z-index: 0;
	}
	
div.box2 {	
	float: left;
	margin: 5px;
	width: 45px;
	height:45px;
	position: relative;
	z-index: 0;
	}
		
span.change {
	opacity: 0;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 800ms;
	-moz-transition: all 300ms ease-out;
	background: #b6e2ff;
	float: left;
	cursor: pointer;
	display: block;
	margin: 0px;
	width: 100px;
	height: 55px;
	position: absolute;
	padding-top: 45px;
	z-index: 1;
	line-height: 19px; 	
	}
	
span.change2 {
	opacity: 0;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 800ms;
	-moz-transition: all 300ms ease-out;
	background: #b5e1ff;
	float: left;
	cursor: pointer;
	display: block;
	margin: 0px;
	width:45px;
	height:45px;
	position: absolute;
	z-index: 1;
	line-height: 45px; 	
	}	

span.change:hover {
	opacity: .8;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 800ms;
	-moz-transition: all 300ms ease-out;
	}
span.change2:hover {
	opacity: .8;
	-webkit-transition: opacity;
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 800ms;
	-moz-transition: all 300ms ease-out;
	}
	

a.oran{
background-image: url(images/template_03.jpg);
background-repeat: no-repeat;
}

a.oran2{
background-image: url(images/template_09.jpg);
background-repeat: no-repeat;
}

a.red{
background-image: url(images/template_07.jpg);
background-repeat: no-repeat;
}

a.green{
background-image: url(images/template_05.jpg);
background-repeat: no-repeat;
}

</style>