@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	padding: 0;	
	color: #999;
	line-height: 2;	
}



header {
	margin: 0 auto;

}



p,h1,h2, {
	margin-top: 0;
}



img {
	vertical-align: bottom;
}



ul {
	margin: 0;
	padding: 0;
}



/*--------------------------------------------------------------
___Header Menu
--------------------------------------------------------------*/

.logo {
	float: right;
	margin-top: 50px;
	margin-right: 50px;
}


.global-nav {
	float: right;
	margin-top: 50px;
	margin-right: 20px;
}


.global-nav li{
	float: right;
	margin: 0 8px;
	list-style: none;
}


.about a {
    width: 30px;
    height: 47px;
    background: url("../topimages/about.png") no-repeat;
    display: block;

}
 
 
.about a:hover {
    background-image: url("../topimages/about2.png");
}


.letter a {
    width: 30px;
    height: 47px;
    background: url("../topimages/letter.png") no-repeat;
    display: block;    
}


.letter a:hover {
    background-image: url("../topimages/letter2.png");
}


.book a {
    width: 30px;
    height: 47px;
    background: url("../topimages/book.png") no-repeat;
    display: block;    
}


.book a:hover {
    background-image: url("../topimages/book2.png");
}


.word a {
    width: 30px;
    height: 47px;
    background: url("../topimages/word.png") no-repeat;
    display: block;    
}


.word a:hover {
    background-image: url("../topimages/word2.png");
}

 
.draw a {
    width: 30px;
    height: 47px;
    background: url("../topimages/draw.png") no-repeat;
    display: block;   
}
 
 
.draw a:hover {
    background-image: url("../topimages/draw2.png");
}



/*--------------------------------------------------------------
___Main Menu
--------------------------------------------------------------*/

#wrap {
	
	position: absolute;
	clear: both;
	height: ;
	width: ;
	top: 18%;
	left: 10%;
	right: 20%;
	bottom: 20%;
	margin: auto;	
}




.content {
	width:960px;
    text-align: left;
}



/*__sidebar
------------------------------------*/
h1 {
	margin-top: 30px;
	font-size: 12px;
	color:#333;
	font-family:  "Yu Mincho", "YuMincho", serif ;
}



.sidebar {
	width: 200px;
	margin: 0 40px 0 0;
	float: left;
	font-size: 11px;
	font-family:  "Yu Mincho", "YuMincho", serif ;
	letter-spacing: 0.2em;
	color: #333;
}



.side-list li {
	list-style: none;
	line-height: 2.2;
	text-indent: -1em;
    padding-left: 2.3em;
}


.u {
	padding-bottom: 3px;
}



/*__main
------------------------------------*/

h2 {
	font-size: 11px;
	color:#333;
	font-family: 'IM Fell Double Pica' ,"Yu Mincho", "YuMincho", serif;
	letter-spacing: 0.2em;
	text-indent: -0.4em;
}



.main  {
	width: 700px;	
	margin::0 30px;
	float: right;
}



.main-list li {
	width: 600px;
	height: 250px;
	list-style: none;
	line-height: 2;
    padding-left: 6em;
	margin-top: 40px;
}



.book-img {
	float: left;
}



.book-txt {
	width: 400px;
	float: right;	
}




.ex {
	font-size: 11px;
	font-family:  "Yu Mincho", "YuMincho", serif ;
	letter-spacing: 0.1em;
	color: #333;
	padding-left: 1.5em;
	border-left: 1px solid #333;
}


.clearfix:after {
	content:"";
	display: block;
	clear: both;
}


/*__link 
------------------------------------*/
a.book:link { 
  color: #333;
  text-decoration: none;
}



a.book:visited {
  color: #333;
  text-decoration: none;
}



a.book:hover,a:active {
  color : #fff;
  background-color: #333;
  text-decoration: none;
}



a.shop:link { 
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #333;
  padding-bottom: 3px;
}



a.shop:visited {
  color: #333;
  text-decoration: none;
}



a.shop:hover,a:active {
  color : #fff;
  background-color: #006699;
  text-decoration: none;
}



/*__ animation
------------------------------------*/
.move {
  margin: 0;
  display:inline-block;
  overflow:hidden;
  position:relative;

}



.move:after{  
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color:#000;
  
  animation: secondaryImageOverlayIn 0.6s 0s cubic-bezier(.77,0,.175,1),
             secondaryImageOverlayOut 0.6s 0.6s cubic-bezier(.77,0,.175,1);
  animation-fill-mode: both;
}



.move2 {
	margin: 0.05em;
	color: #000;
	font-size: 17px;
	font-family: 'IM Fell Double Pica', serif;
	letter-spacing: 0.3em;
	font-weight: 600;
	animation: fadeIn 0.1s 0.5s;
	animation-fill-mode: both;
}



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

@keyframes secondaryImageOverlayIn {
    0% {
      width: 0;
    }
    100% {
      width:  100%;
    }
  }

  @keyframes secondaryImageOverlayOut {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(102%);
    }
  }





/*--------------------------------------------------------------
___Footer Menu
--------------------------------------------------------------*/

footer {
	margin-bottom: 2%;
	margin-left: 3%;
    position: fixed;
    bottom: 0;
    width: 100%;
}


footer small {
	font-size: 12px;
	font-family: 'IM Fell Double Pica', serif;
    letter-spacing: 0.3em;
}