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

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



header {
	margin: 0 auto;
}



p,h1,{
	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
--------------------------------------------------------------*/
#about {
	background-image: url(../topimages/about.jpg);
	background-repeat: no-repeat;
	background-position:  right;
	background-attachment: fixed;
	background-size: contain;
	
}



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




.main  {
	margin-top: 30px;
	font-size: 11px;
	font-family:  "Yu Mincho", "YuMincho", serif ;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #333;
	
}



.main2 { 
	font-size: 11px;
	font-family:  "Yu Mincho", "YuMincho", serif;
	line-height: 1.5;
	letter-spacing: 0.1em;
	color: #333;
	text-indent: -1em;
    padding-left: 2em;

}



.marker {
	 background: linear-gradient(transparent 0%,rgba(255, 255, 255, 0.8) 0%);
	
}



/*__ sns
------------------------------------*/

.link a {
	margin-top: -11px;
	margin-left: 25px;
	width: 50px;
	display: block;
	text-align: center;
	border: 1px solid;
	font-size: 13px;
	font-family: 'IM Fell Double Pica', serif;
	color: #333;
	letter-spacing: 0.1em;
	background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0, 95, 130, 1) 50%);
    background-position: 0 0;
    background-size: 200% auto;
    transition: 0.3s;
	text-decoration: none;
	
}




.link a:hover {
    background-position: -100% 0;
    color: #fff;
    border: 1px solid #000;
}



.twitter {
    background: url("..//topimages/twitter.png") no-repeat;
}
 
 
.twitter a {
    margin-right: -4px;
    width: 40px;
    height: 40px;
    background: url("../topimages/twitter.png") no-repeat;
    display: block;

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



.instgram {
    background: url("..//topimages/instgram.png") no-repeat;
}


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


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



.sns li {
	float: left;
	margin: 0 20px 0  0;
	list-style: 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;
}