@charset "utf-8";

/* mainArea
================================================== */
/* mainArea */
#mainArea {
	position: relative;
	z-index: 0;
}
@media screen and (max-width: 600px) {
	#mainArea {
		background-color: #EAE7E3;
	}
}
/* mainBox */
#mainBox {
	position: relative;
	z-index: 5;
}
#mainLogo {
	margin: 0;
	padding: 2% 0 0 6%;
	width: 23.5%;
}
@media screen and (max-width: 600px) {
	#mainLogo {
		margin: 0 auto;
		padding: 3% 0 44% 0;
		width: 50%;
	}
}
/* slideArea
================================================== */
#slideArea {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}
@media screen and (max-width: 600px) {
	#slideArea {
		top: 31%;
	}
}
/* circle
================================================== */
#circle01 {
	position: absolute;
	width: 33%;
	top: 82%;
	left: -18%;
	z-index: 2;
}
#circle02 {
	position: absolute;
	width: 40%;
	top: -50%;
	left: -10%;
	z-index: 2;
}
#circle03 {
	position: absolute;
	width: 8%;
	top: 56%;
	left: 2%;
	z-index: 3;
}
#circle04 {
	position: absolute;
	width: 10%;
	top: 81%;
	left: 23%;
	z-index: 3;
}
#circle05 {
	position: absolute;
	width: 29%;
	top: 73%;
	right: -22%;
	z-index: 2;
}
#circle06 {
	position: absolute;
	width: 7%;
	top: 126%;
	right: 2%;
	z-index: 3;
}
@media screen and (max-width: 600px) {
	#circle01 {
		width: 33%;
		top: 100%;
		left: -18%;
	}
	#circle02 {
		width: 40%;
		top: -8%;
		left: -10%;
	}
	#circle03 {
		width: 8%;
		top: 20%;
		left: 2%;
	}
	#circle04 {
		width: 10%;
		top: 3%;
		left: 92%;
	}
	#circle05 {
		width: 29%;
		top: 19%;
		right: -22%;
	}
	#circle06 {
		width: 7%;
		top: 96%;
		right: 2%;
	}
}
/* topArea
================================================== */
.topBg {
	padding: 5% 0 1%;
	margin-bottom: 5%;
	background-color: #EAE7E3;
}
.topArea {
	position: relative;
	z-index: 5;
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	padding: 0 0 2%;
}
@media screen and (max-width: 600px) {
	.topArea {
		padding: 5% 0 10%;
	}
}
.topArea p{
	padding-top: 2%;
}
.topArea figure{
	padding-top: 2%;
}

/* pointArea
================================================== */
.pointArea {
	width: 90%;
	max-width: 800px;
	margin: 0 auto;
	padding: 5% 0 10%;
}
@media screen and (max-width: 600px) {
	.pointArea {
		padding: 5% 0 10%;
	}
}
/* アコーディオン */
#menu li{
	list-style: none;
	margin-top: 3%;
}
@media screen and (max-width: 600px) {
	#menu li{
		margin-top: 5%;
	}
}
.main_menu{
	padding: 10px 2%;
	cursor: pointer;
	background-color: #222;
	border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	color: #fff;
}
.main_menu:hover{
	background-color: #ED7749;
	transition: .3s;
}
.sub_menu{
	margin: 1% 0 0 0;
	padding: 2% 5%;
	background-color: #eee;
	border-radius: 5px; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
#menu li .sub_menu li{
	margin-top: 0;
}
#menu li figure{
	width: 70%;
	margin: 0 auto;
	padding: 3% 0 0; 
}