body{
font-family:ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;
padding:0;
letter-spacing:0.1em;       
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

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

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

A {text-decoration:none;
     color:#fff; }

img {border: none; 
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}
	
#footer { 
margin:0;
padding:0;
}

nav{
display:flex;
}

#logo { 
z-index:2;
position: fixed;
overflow: hidden;
display:flex;
	margin:10px 0 0 50px;
}


#copy{ 
font-size:70%;
color:  #666;
margin:0 0 0 10px;
padding:0;
letter-spacing: 0.1em; 
clear:both;
}

#topmenu ul{ 
text-align:left;
list-style:none;
margin:20px 0 30px 150px;
}

#topmenu ul li{ 
margin:0 ;
padding:0;
display:inline;
}

#contents{
padding:0 0 0 10%;
	max-width:1350px;
}
	
ul #recent{ 
	list-style: none;
	}
	
#recent li {
	float:left;
	border: none;
	display: block;
	padding:0;
	margin:3.3% 3.3% 0 0;
	width:30%;
}

#recent li:nth-child(3n+1)  {
	clear:both;
}

.b{margin:50px 0 0 0;}

.c{margin:100px 0 0 0;}

figure {
	position: relative;
	overflow: hidden;
		margin:0px;
		padding:0px;
		  		    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.33);
}	

figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
	color:#fff;
}
figcaption h3,
figcaption p {
	position: absolute;
	left: -100%;
	-webkit-transition: .3s;
	transition: .3s;
	text-align:left;
	font-family: Futura;
}
figcaption h3 {
	top: 30px;
	text-align:left;
	font-weight:nomal;
	font-size:130%;
}
figcaption p {
	top: 90px;
	font-size:80%;
	line-height:180%;
}
#recent  li :hover figcaption {
	opacity: 1;
}
#recent  li :hover figcaption h3,
#recent  li :hover figcaption p {
	left: 30px;
}
#recent  li:hover figcaption h3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
#recent  li :hover figcaption p {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

#footer{
text-align:right;
font-size:70%;
color: #888;
padding:10px 10px 0 0;
margin:0 0 0 0;
letter-spacing: 0.1em; 
clear:both;
 }
 
   @media screen and (max-width:1210px) { 
     #contents{
padding:0 0 0 3%;
}
  figcaption h3 {
	top: 15px;
}

  figcaption p {
	top: 120px;
}

    }
 
  @media screen and (max-width:1150px) { 
  
  #contents{
padding:0 0 0 5%;
	max-width:1300px;
}

#recent li {
	margin:3%;
	width:43%;
}
  

  figcaption p {
	top: 70px;
}
  }
 

 @media screen and (max-width:790px) { 

figcaption h3 {
	top: 20px;
	font-size:130%;
}

 }

 @media screen and (max-width:650px) {  
 
 #logo{ 
width:80%;
	margin:0 0 0 10px;
}
 
 #topmenu ul {
    text-align: right;
    list-style: none;
    margin: 20px 0 30px 8x0px;
}

 #topmenu ul li{
    margin: 0;
}
 
 
 #contents {
    margin: 0 ;
}

 #contents img {
    width: 100%;
}

ul {
	margin:0;
	padding:0;
}

#recent li {
	float:none;
	margin:10%;
	width:89%;
}

figcaption h3 {
    top: 10px;
    text-align: left;
    font-weight: nomal;
    font-size: 110%;
}

  figcaption p {
	top: 60px;
}

 }