/*
align-items: Vertical(col) position
justify-content: Horizontal(row) position
flex-direction:
*/

* {
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.container {
	border-radius: 1em;
	padding: 1em;
	position: absolute;
	top: 0%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0%) 
}

.gallery {
	display: block;
    margin-left: auto;
    margin-right: auto;
	margin: 10;
	padding: 10;
	text-align: center;
}

html {
	-webkit-text-size-adjust: 100%;
}

a {
	text-decoration: none;
	cursor: pointer;
}

body{
	background: #FFFFFF;
	color: #3b4347;
	font-size: 100%;
	width: 100%;
	height: 100%;
  }
  
canvas{
	width: 100%;
}

p {
	width: 100%;
	background-color: #dbedf0;
}

p.copywrite {
	font-size: xx-small;
	position: fixed;
}

body{
    margin:0px;
    padding:0px;
    height:100%;
    width:100%;
    position: relative; /*配置位置の基準となる指定*/
}

#header{
    text-align: center;
    position: fixed;
    background-color: #aabbdd;
    width: 100%;
    height:10%;
	-webkit-text-size-adjust: 50%;
}

/*  */
#content{
    text-align: center;
    width: 100%;
    height:80%;
}

#footer{
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #DBEDF0;
    width: 100%;
    height:10%;
    font-size: xx-small;
    vertical-align: center;
	-webkit-text-size-adjust: 50%;
}

@media only screen and (max-width: 767px) {
	body {
	  font-size: 80%; 
	}
  }