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


/* -------------------------------------
Browser：IE11 over /BP 768px
-------------------------------------
01: TOP
-------------------------------------*/

/**共通**/
h1.tit{
	font-size: 34px;
	margin: 0 auto;
	color: #646464;
	font-weight: bold;
	text-align: center;
}
h1.tit img{
	display: block;
	margin: 0 auto;
}

/** ========================================
		01.TOP
======================================== **/

/**　メインイメージ
-----------------------**/

.mainimg{
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	background: #8bd235;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	width: 100%;
	margin: 20px auto 0;
}
.mainimg p{
	font-size: 16px;
	line-height: 1.8;
	padding: 40px 0;
}
.mainimg strong{
	display: block;
	font-size: 24px;
	line-height: 1.5;
	padding: 0 0 40px;
}
.mainimg figure img{
	display: block;
	margin: 0 auto;
}

/**　セクション
-----------------------**/
/**メインコンテンツ**/
.contents{
	color: #ffffff;
	padding: 0;
	position: relative;
	overflow: hidden;
	margin: 30px auto;
}
.cont-box{
	padding: 90px 45px 90px 90px;
	margin: 0 auto;
	width: 445px;
	float: left;
}
.cont-box h1{
	font-size: 40px;
	font-weight: bold;
	width: 100%;
	line-height: 1.2;
}
.cont-box p{
	width: 100%;
	padding: 10px 0 20px;
}
.cont-box a{
	border: 1px solid #ffffff;
	color: #ffffff;
	display: block;
	padding: 15px;
	text-align: center;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.cont-box a:hover {
	background-color: #FFFFFF;
	filter: alpha(opacity=100);
	-ms-filter: alpha(opacity=100);
	opacity: 1.0;
}
.contents figure{
	float: right;
	margin: 0 40px 0 0;
}.contents figure img{
	display: block;
	width: 100%;
	height: auto;
}
/**画像位置**/
.contents.about figure{
	margin-top: 40px;
}.contents.program figure{
	margin-bottom: 50px;
}.contents.guide figure{
	margin-top: 60px;
}
/**背景色**/
.about {
	background: #41cdef;
}.program{
	background: #fcc800;
}.guide{
	background: #8bd235;
}
/**画像景色**/
.about .cont-box{
	background: url("../images/bg_contents_01.png") no-repeat 20px 20px;
}.program .cont-box{
	background: url("../images/bg_contents_02.png") no-repeat 300px 70px;
}.guide .cont-box{
	background: url("../images/bg_contents_03.png") no-repeat 30px 200px;
}
/**ボタンテキスト色**/
.about .cont-box a:hover {
  color:#41cdef;
}.program .cont-box a:hover {
  color:#fcc800;
}.guide .cont-box a:hover {
  color:#8bd235;
}
/**SVG**/
.contents svg{
	width: 100%;
	position: absolute;
}
.contents svg polygon{
	fill:#ffffff;
}
.about svg{
	height: 30px;
	left: 0;
	bottom: 0;
}.program svg{
	height: 10px;
	left: 0;
	bottom: 0;
}.guide svg{
	height: 30px;
	left: 0;
	top: -1px;
}


/**お知らせ**/
.news{
	margin: 100px auto;
}
.news ul{
	border-top: 1px dotted #c5c5c5;
	margin: 0 auto;
	width: 700px;
}
.news ul li{
	border-bottom: 1px dotted #c5c5c5;
	padding: 20px 10px;
}
.news ul li time{
	color: #8fc02e;
	display: inline-block;
	width: 160px;
}
.news ul li a{
	display: inline-block;
}

/**インスタグラム**/
.insta{
	margin: 100px auto;
}
.insta a{
	color: #646464;
}
.insta p{
	text-align: center;
	margin-bottom: 30px;
}
.insta ul{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.insta ul li{
	width: 300px;
	height: 300px;
	overflow: hidden;
	position: relative;
	margin: 10px auto;
}
.insta ul li img{
	min-height: 100%;
	max-width: 150%;
	max-height: 150%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

@media screen and (max-width:768px){
/**　メインイメージ
-----------------------**/
	.mainimg{
		padding: 0 5%;
		width: 100%;
		margin-top: 5px;
	}
	.mainimg br{
		display: none;
	}
	.mainimg figure{
		margin: 0 auto;
		width: 90%;
	}
	.mainimg img{
		width: 100%;
	}
	
/**　セクション
-----------------------**/
	/**メインコンテンツ**/
	.cont-box{
		padding: 50px 5% 20px 5%;
		width: 100%;
		float: none;
	}
	.contents figure{
		float: none;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	/**画像位置**/
	.contents.about figure{
		margin-top: 20px;
	}.contents.program figure{
		margin-top: -40px;
		margin-bottom: 20px;
	}.contents.guide figure{
		margin-top: 20px;
	}
	/**画像背景**/
	.about .cont-box{
		background: url("../images/bg_contents_01.png") no-repeat 10px 10px;
		background-size: 100px 100px;
	}.program .cont-box{
		background: url("../images/bg_contents_02.png") no-repeat 230px 0;
		background-size: 100px 100px;
		padding-top :0;
		padding-bottom: 60px;
	}.guide .cont-box{
		background: url("../images/bg_contents_03.png") no-repeat 0 140px;
		background-size: 100px 100px;
	}
	/**お知らせ**/
	.news{
		margin: 50px auto;
	}
	.news ul{
		width: 90%;
		margin-top: 20px;
	}
	.news ul li time{
		width: 90%;
	}
	.news ul li a{
		width: 90%;
	}
	
	/**インスタグラム**/
	.insta ul{
		display: block;
		width: 100%;
	}
	.insta ul li{
		margin: 10px auto;
	}

}