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

/*PCレイアウト*/
header {
	width: 100%;
	height:100vh;
	background: url(../img/main.png) no-repeat center center/cover;
}
header p {
	max-width: 300px;
	line-height: 1.5;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 3px #FFF;
}
#gnav {
display: none;
}
#one {
	padding-top: 20px;
	margin: 0 0 0 200px;
		display: none;
}
#two {
	color: #FFF;
	margin: 60px 0 0 300px ;
	text-shadow: 1px 1px 3px #000;
	font-size: 30px;
		display: none;
}
#three {
	max-width: 500px;
	margin: 50px 0 0 150px;
	font-size: 32px;
		display: none;
}
#suimei {
	color: #E84729;
	font-size: 42px;	
	text-shadow: 1px 1px 3px #FFF;
}
#cloud {
  position: absolute;
  top: calc(100vh - 250px);
  left: 0;
  width: 100%;
  height: 300px;
  background:url(../img/cloud.png) repeat-x left center/cover;
	animation: cloudmove 30s linear infinite;
	-webkit-animation: cloudmove 30s linear infinite;
	z-index: 100;
}
#cloud2 {
  position: absolute;
  top: calc(100vh - 250px);
  left: 0;
  width: 100%;
  height: 300px;
  background:url(../img/cloud3.png) repeat-x left center/cover;
	animation: cloudmove2 40s linear infinite;
	-webkit-animation: cloudmove2 40s linear infinite;
	z-index: 99;
}
@keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: 100% 0;}
}
@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: 100% 0;}
}
@keyframes cloudmove2 {
	0% {background-position: 0 0;}
	100% {background-position: 100% 0;}
}
@-webkit-keyframes cloudmove2 {
	0% {background-position: 0 0;}
	100% {background-position: 100% 0;}
}
#cloud img {
  width: 100%;
}
.bg {
	width: 100%;
	height: 100vh;
	background: url(../img/inyo2.png) no-repeat center center/cover;
}
.all {
	width: 100%;
	height: 100vh;
	background: rgba(224,214,202,0.5);
	position: relative;
}
#concept {
	max-width: 600px;
	height: 100px;
	position: absolute;
	top: -30%;
	right: 0;
	bottom: 0;
	left:0;
	margin: auto;
	z-index: 100;
}
#concept p {
	text-align: center;
	font-size: 18px;
}
footer {
	position: absolute;
	bottom: 0;
	left: 0;
}

@media screen and (max-width:999px){
header {
	width: 100%;
	height:100vh;
	background: url(../img/main.png) no-repeat center center/cover;
}
h1 {
	padding-top: 100px;
	width: 200px;
	background: url(../img/logo.svg) no-repeat center center/contain;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	position: static;
	margin: 0 auto;
}
header p {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 20px;
}
#cloud {
  position: absolute;
  top: calc(100vh - 250px);
  left: 0;
  width: 100%;
  height: 300px;
  background:url(../img/cloud.png) repeat-x left center/cover;
	animation: cloudmove 30s linear infinite;
	-webkit-animation: cloudmove 30s linear infinite;
	z-index: 100;
}
#cloud2 {
  position: absolute;
  top: calc(100vh - 250px);
  left: 0;
  width: 100%;
  height: 300px;
  background:url(../img/cloud3.png) repeat-x left center/cover;
	animation: cloudmove2 40s linear infinite;
	-webkit-animation: cloudmove2 40s linear infinite;
	z-index: 99;
}
.left {
	width: 100%;
	margin: 100px auto 0;
	padding-bottom: 10px;
	background: rgba(255,255,255,0.5);
}
#one {
	padding-top: 20px;
	margin: 0 auto;
	color: #000;
	font-size: 16px;
	text-shadow: 1px 1px 3px #000;
}
#two {
	color: #000;
	margin: 20px auto 0;
	font-size: 20px;
}
#three {
	margin: 20px auto 0;
	font-size: 24px;
	text-shadow: 1px 1px 3px #000;
}
.container {
	width: 100%;
	padding-top: 100px;
}
footer {
	position: absolute;
	bottom: 50px;
	left: 0;
}
}
@media screen and (max-width:769px){
h1 {
	padding-top: 350px;
	width: 200px;
	background: url(../img/logo.svg) no-repeat center center/contain;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	position: static;
	margin: 0 auto;
}
#cloud {
  position: absolute;
  top: calc(100vh - 250px);
  left: 0;
  width: 100%;
  height: 300px;
  background:url(../img/cloud.png) repeat-x left center/cover;
	animation: cloudmove 30s linear infinite;
	-webkit-animation: cloudmove 30s linear infinite;
	z-index: 100;
}
#cloud2 {
  position: absolute;
  top: calc(100vh - 250px);
  left: 0;
  width: 100%;
  height: 300px;
  background:url(../img/cloud3.png) repeat-x left center/cover;
	animation: cloudmove2 40s linear infinite;
	-webkit-animation: cloudmove2 40s linear infinite;
	z-index: 99;
}
header p {
	width: 300px;
	line-height: 1.5;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.container {
	max-width: 300px;
	padding-top: 100px;
}
}
@media screen and (max-width:599px){
	header {
	width: 100%;
	height:100vh;
	background: url(../img/main.png) no-repeat center center/cover;
}
h1 {
	padding-top: 100px;
	width: 200px;
	background: url(../img/logo.svg) no-repeat center center/contain;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	position: static;
	margin: 0 auto;
}
.left {
	width: 100%;
	margin: 10px auto 0;
	padding-bottom: 10px;
	background: rgba(255,255,255,0.5);
}
#cloud,#cloud2 {
	margin: 0;
	height: 0;
	display: none;
}
nav {
  margin-bottom: 10px;
}
header p {
	max-width: 300px;
	line-height: 1.5;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#one {
	padding-top: 10px;
  font-size: 16px;
}
#two {
  font-size: 18px;
}
#three {
  font-size: 20px;
}
#suimei {
	font-size: 26px;	
}

.container p {
	font-size: 18px;
}
#concept {
	max-width: 600px;
	height: 100px;
	position: absolute;
	top: -60%;
	right: 0;
	bottom: 0;
	left:0;
	margin: auto;
	z-index: 100;
}
}
@media screen and (max-width:410px){
.left {
	width: 100%;
	margin: 0 auto 0;
	padding-bottom: 10px;
	background: rgba(255,255,255,0.5);
}
}