@charset "utf-8";
/* CSS Document */
html {
	}
body {
	padding:20% 0 0 0;
 	font: 90% sans-serif;
	background:  url(../image/hana02.png) no-repeat,#FF6F61 url(../image/chidori02.png) repeat-x;
	background-size:25em , auto;
	background-position: 0 30%,0 0;
	background-attachment: fixed,fixed;
	}
h1,h2,h3,h4,h5,h6 {
	}
h1 {
	width: 100%;
	display: inline-block;
	padding: .75em 0;
	color: #2D3332;
	text-decoration: none;
	text-align: center;
}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

p {}
em,strong {}
pre {}
code {}

ul {}
ul li {}
ol {}
ol li {}
dl {}
dl dt {}
dl dd {}

table {}
table tr th {}
table tr td {}

form {}
input,textarea {}
label {}

.wrapper{
	width:80%;
	padding:2em;
	margin:0 auto;
	display:grid;
	grid-grap:10px;
	grid-template-columns:(4, minmax(200px,1fr));
}
header {
	margin:0 auto;
	grid-column: 1/3;
	grid-row: 1/2;
}
nav {
	grid-column:3/4;
	grid-row:1/2;
	padding:1em 0 0 0;
}
nav ul{
	display:flex;
	align-items:center;
}
nav ul li{
	margin:1em;
	padding: 0.5em;
	width:15%;
	border-radius: 4px;
	display: inline-block;
	padding: .75em 4em;
	border: 2px solid #2d3332;
	border-radius: 5em;
	color: #333;
	text-decoration: none;
	text-align: center;
}
.wrapper-contents{
	grid-column:1/4;
	grid-row:2/3;
}
.main {
	display:flex;
	width:100%;
	justify-content: center;
	flex-wrap: wrap;
}
.figure-inner {
  position: relative;
  -webkit-perspective: 1000;
  perspective: 1000;
  width: 200px;
  height: 200px;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  	margin:1em 1.5em;
	border-radius: 10px;
	padding: 15px;
	text-align: center;
	display: inline-block;
	padding: .75em 4em;
	border: 2px solid #2d3332;
	border-radius: 5em;
	text-decoration: none;
	text-align: center;
}
.image,
figcaption {
  position: absolute;
  width: 200px;
  height: 200px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.image {
  z-index: 2;
}
figcaption {
  background: #fff;
  color:#889995;
  border: 2px solid #b6ccc7;
  padding:1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
figure:hover .figure-inner,
figcaption {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.thumbnail {
	border:1px solid #b6ccc7;
	padding:1px;
	max-width: 100%;
	height: auto;
	}
p {
  text-align: left;
}
footer{
	grid-column:1/4;
	grid-row:3/4;
}
footer p {
	text-align:center;
}