@charset "utf-8";
  

/*---------------------------------------
  タイトル部分
---------------------------------------*/
.title_img{
	background:url(../img/main_img_6.jpg) center;
	background-size:cover;
	padding:7rem 5%;
	/* じわっと画像が表示される */
 	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
.title_img h2{
	color:#fff;
	text-align:left;
	padding:0;
	margin:0;
}
.title_img h2:before{
	content:none;
}

@media screen and (max-width: 600px) {
.title_img{
	padding:5rem 5%;
}
}


/*---------------------------------------
  里山留学案内
---------------------------------------*/
.bg_img1{
	position:absolute;
	left:1%;
	width:11%;
	max-width: 183px;
}
.bg_img2,
.policy .bg_img2{
	position:absolute;
	right:5%;
	top:10%;
	width:11%;
	max-width: 165px;
}
.bg_img3{
	position:absolute;
	left:1%;
	top:15%;
	width:11%;
	max-width:230px;
}
.bg_img4{
	position:absolute;
	right:1%;
	width:11%;
	max-width:194px;
}



.guide p{
	padding-bottom:1.5rem;
}

.introduction img,
.purpose .inner img{
	float:left;
	width:48%;
	margin:0 30px 10px 0;
}
.policy img,
.philosophy img{
	float:right;
	width:48%;
	margin:0 0 10px 30px;
}

.philosophy,
.role{
  background:#fff;
  position: relative;
  overflow: hidden;
  padding-top:5rem;
}
.philosophy::before,
.role::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10vw solid #f5f1e6;  /* 三角を白にする */ 
}
.philosophy::before{
  border-right: 100vw solid transparent;
}
.role::before{
  border-left: 100vw solid transparent;
}

.purpose{
	background:#cbdd99;
	position: relative;
	overflow: hidden;
	padding:5rem 0;
}
.purpose::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10vw solid #fff;  /* 三角を白にする */ 
  border-left: 100vw solid transparent;
}
.policy{
  position: relative;
  overflow: hidden;
  padding:5rem 0;
  min-height:200px;
}
.policy::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10vw solid #cbdd99;  /* 三角を白にする */ 
  border-right: 100vw solid transparent;
}
.overview{
	position: relative;
	overflow: hidden;
	padding:5rem 0;
}
.overview::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 10vw solid #fff;  /* 三角を白にする */ 
  border-right: 100vw solid transparent;
}

.overview h3{
	padding:2rem 0 1rem;
	margin-top:1.5rem;
	border-top:1px solid #d2c5a3;
}
.overview h3.top{
	margin:0;
	padding:0 0 1rem;
	border:none;
}
.guide ol {
	counter-reset: count 0;
	padding-left:20px;
}
.guide ol > li{
	line-height:1.7;
	text-indent: -1.3em;
	padding-left: 1.3em;
	padding-bottom:0.7rem;
}
.guide ol > li:before {
  content: counter(count) ". ";
  counter-increment: count 1;
}
.guide ul{
	counter-reset: count 0;
	padding-left:20px;
}
.guide ul > li:before {
  content: counter(count) " ) ";
  counter-increment: count 1;
}
.guide ul > li{font-size:90%;}
.overview p{
	padding:0 0 0.8rem 20px;
}



@media screen and (max-width: 600px) {

.bg_img1{
	top:3%;
	width:18%;
}
.bg_img2,
.policy .bg_img2{
	top:3%;
	width:18%;
}
.bg_img3{
	top:8%;
	width:18%;
}
.bg_img4{
	top:3%;
	width:18%;
}
.philosophy,
.purpose,
.policy{
  padding:3rem 0 0;
}


}