@charset "utf-8";

@font-face {
font-family: "HuiFont109-1";
  src: url(../font/HuiFont109-1.eot) format("eot"), url(../font/HuiFont109-1.woff) format("woff");
}



/* ########### 559px以下 ########### */
@media  (max-width: 559px) 
{
.page {
  overflow: scroll;
}
.hero {
  background-image: url(../img/back01.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height:800px;
  }
.box4{text-align: center;
width: 100%;}  
.about{
margin: 0 auto;
width:100%;
position: relative;
	}
.about p{ display: inline-block;
	width: 90%;
margin: 0 auto;
  padding: 0px;
  color:#000000;
	text-decoration: none;
	font-size:15px;
	font-weight:normal;
	line-height:26px;
	letter-spacing: 0.05em;
	font-family: "M PLUS Rounded 1c";
	left:25px;
	top:0px;
	z-index:999;
text-align: left;	}	
.about img{
position:absolute;
	}
/* 地図 */
#mad1 {
	z-index:0;
	width: 210px;
	left:100px;
	top:160px;
	}
/* キャラ */
#mad2 {
	width: 90px;
	left:20px;
	top:200px;
	}
  }
/* ########### 560px～767px以下 ########### */
@media (min-width: 560px) and (max-width: 767px) 
{
.page {
  overflow: scroll;
}
.hero {
  background-image: url(../img/back01.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height:855px;
  }
.box4{text-align: center;
width: 100%;}	
.about{
margin: 0 auto;
width:90%;
position: relative;
	}
.about p{ display: inline-block;
	width: 90%;
margin: 0 auto;
  padding: 15px;
  color:#000000;
	text-decoration: none;
	font-size:15px;
	font-weight:normal;
	line-height:26px;
	letter-spacing: 0.2em;
	font-family: "M PLUS Rounded 1c";
	left:25px;
	top:0px;
	z-index:999;
text-align: left;	}	
.about img{
position:absolute;
	}
/* 地図 */
#mad1 {
	width: 220px;
	left:295px;
	top:160px;
	}
/* キャラ */
#mad2 {
	width: 100px;
	left:50px;
	top:250px;
	}
  }

/* ########### 768px～1039px以下 ########### */
@media (min-width: 768px) and (max-width: 1039px)
{
.page {
  overflow: scroll;
}
.hero {
  background-image: url(../img/back01.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height:800px;
  }
  .about{
width:100%;
position: relative;
background-color:#D39C9D;
	}
.about p{
position:absolute;
	width: 40%;
  margin: 0px;
  padding: 15px;
  color:#000000;
	text-decoration: none;
	font-size:16px;
	font-weight:normal;
	line-height:28px;
	letter-spacing: 0.3em;
	font-family: "M PLUS Rounded 1c";
	left:100px;
	top:0px;

	}	
.about img{
position:absolute;
	}
/* 地図 */
#mad1 {
	width: 300px;
	left:450px;
	top:5px;
	}
/* キャラ */
#mad2 {
	width: 100px;
	left:20px;
	top:250px;
	}
  }
/* ########### 1040px 以上 ########### */
@media (min-width: 1040px) {
.page {
  overflow: scroll;
}
.hero {
  background-image: url(../img/back01.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height:900px;
  }
	
.about{
	width:100%;
position: relative;
background-color:#D39C9D;
	}
.about p{
position:absolute;
	width: 45%;
  margin: 0px;
  padding: 15px;
  color:#000000;
	text-decoration: none;
	font-size:16px;
	font-weight:normal;
	line-height:35px;
	letter-spacing: 0.3em;
	font-family: "M PLUS Rounded 1c";
		left:170px;
	top:5px;

	}	
.about img{
position:absolute;
	}
/* 地図 */
#mad1 {
	width: 30%;
	left:680px;
	top:5px;
	}
/* キャラ */
#mad2 {
	width: 10%;
	left:160px;
	top:250px;
	}	

			}			
/* ########### 1260px 以上 ########### */
@media (min-width: 1260px) {
	/* 全体の横幅を固定 */
.box4{
	width: 1260px;
	margin-left: auto;
	margin-right: auto}	
		
			}