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

#project-base{
	margin-top: 5%;
	padding-left: 7%;
	padding-right: 7%;
	font-size: 2.5vw;
	min-height: 60vw;
	line-height: 2.5;
}
@media screen and (max-width: 480px) {
	#project-base{
	font-size: 3.2vw;
}
}


h3{
	font-size: 4.5vw;
	margin-bottom: 3%;
}

.h3-sub{
	font-size: 2.6vw;
}

	h3 span br{
		display:none;
	}

@media screen and (max-width: 480px) {
	h3{
	font-size: 5.5vw;
	line-height: 1;
	margin-bottom: 5%;
	}

	.h3-sub{
		display: block;
		font-size: 3.3vw;
		line-height: 1.5;
	}
	
	h3 span br{
		display: inline;
	}
}

.key-describe{
	color: #010A4F;
	font-size: 1.8vw;
	line-height: 2.2;
}
@media screen and (max-width: 480px) {
	.key-describe{
	font-size: 3vw;
}
}



.project{
	margin-top: 18%;
}

.project p{

	margin-bottom: 3vw;
}

.none{
	display: none;
}
@media screen and (max-width: 480px) {
	.none{
	display: inline;
}
}

.ppb-block{
	display: flex;
	margin-top: 7%;
}

@media screen and (max-width: 480px) {
	.ppb-block{
	display: block;
	margin-top: 3%;
}
}

.ppb-block a{
	flex: 1;
	margin: 1%;
}

.project-page-bottun{
	font-size: 1.5vw;
	padding: 1% 3%;
	width: 100%;
	height: 100%;
	margin: 0 4%;
	color: white;
	transition: 0.5s;
}

.project-page-bottun:hover{
	font-size: 1.7vw;
	padding: 0% 3%;
}


.project-page-bottun{
	position: relative;
	background-color: #1962A3;
	z-index: 1;
}

.project-page-bottun::before{
	content: "";
	display: block;
	position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
	background-color: #47763c;
	z-index: -1;
	transition: 0.4s ease-out;
	
}

.project-page-bottun:hover::before{
	height: 0%;
	transition: 0.4s ease-in;
}

.natane-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/natane-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

@media screen and (max-width: 480px) {
	.natane-bottun{
		background-position: 80%;
	}
}



.tanken-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/tanken-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

@media screen and (max-width: 480px) {
	.tanken-bottun{
		background-position: 80%;
	}
}


.sawatari-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/sawatari-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

@media screen and (max-width: 480px) {
	.sawatari-bottun{
		background-position: 80%;
	}
}


.koryu-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/koryu-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

.saisei-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/saisei-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

.malawi-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/malawi-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

.negros-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/negros-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

.oseki-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/oseki-top.jpg");
	background-size: cover;
	transition: 0.5s;
}

.kaiga-bottun{
	color: white;
	height: 100%;
	background-image: url("/~oseki/image/project/kaiga-top.jpg");
	background-size: cover;
	text-shadow: 0 0 10px #2C4C25;
	transition: 0.5s;
}

/*未作成記事ボタン---*/

.none{
	width: 32%;
	margin: 1%;
}


/*------*/

.project-hover{
	transition: 0.5s;
	font-size: 2vw;
	padding: 3% 3%;
}

@media screen and (max-width: 480px) {
	.project-hover{
		font-size: 3.5vw;
		padding: 1% 3%;
	}
}

.project-hover:hover{
	color: white;
	text-shadow: 0 0 10px #47763c;
	background-color: #2C4C25;
	background-blend-mode: multiply;
	transition: 0.5s;
}

/*プロジェクト記事---*/

@media screen and (max-width: 480px) {
	.subtitle h2{
		font-size: 4.5vw;
	}
}


.project-text{
	display: flex;
  align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25%;
	vertical-align: middle;
	align-content: flex-start;
	place-items: center;
	font-size: 2.2vw;
}

@media screen and (max-width: 480px) {
	.project-text{
		margin-bottom: 15%;
		font-size: 3vw;
	}
}


.project-contents-top{
	display: block;
	padding-left: 7%;
	padding-top: 7%;
	font-size: 2.5vw;
	min-height: 23vw;
	color: white;
	text-shadow: 0 0 10px #2C4C25;
}

@media screen and (max-width: 480px) {
	.project-contents-top{
		padding-top: 5%;
	}
	
	.project-contents-top h1{
		font-size: 6.2vw;
	}
}


.project-article{
	display: grid;
	grid-template-rows: 40vmax,40vmin;
	grid-template-columns: 45vw 45vw;
	justify-content: center;
	grid-gap: 0% 2%;
	margin-top: 4%;
}

@media screen and (max-width: 480px) {
	.project-article{
		grid-template-columns: 80vw;
	}
}

.article-photo{
	display: flex;
 	 align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25%;
}


.wrapper{
	display: block;
	height: auto;
	position: relative;
}

.youtube{
	margin-bottom: 25%;
}



/*なたねプロジェクト---*/

.project-natane{
	background-image: url("/~oseki/image/project/natane-top.jpg");
	background-size: cover;
	margin-top: 0;
}

/*------*/

/*たんけんシリーズ---*/

.project-tanken{
	background-image: url("/~oseki/image/project/tanken-top.jpg");
	background-size: cover;
	margin-top: 0;
}

.subtitle{
	display: block;
	align-items: center;
	text-align: center;
	font-size:2.5vw;
	margin-top: 10%;
	margin-bottom: 12%;
	padding-bottom: auto;
	
}

.subtitle-color{
	color: #1962A3;
}

.season{
	font-size: 2.8vw;
	text-align: center;
}

/*------*/

/*佐渡川プロジェクト---*/

.project-sawatari{
	background-image: url("/~oseki/image/project/sawatari-top.jpg");
	background-size: cover;
	margin-top: 0;
}



/*------*/


/*教材再生プロジェクト---*/

.project-saisei{
	display: block;
	background-image: url("/~oseki/image/project/saisei-top.jpg");
	background-size: cover;
	margin-top: 0;
}

/*------*/

/*国際絵画交流プロジェクト---*/

.project-kaiga{
	background-image: url("/~oseki/image/project/kaiga-top.jpg");
	background-size: cover;
	margin-top: 0;
}

/*------*/


/*マラウィプロジェクト---*/

.project-malawi{
	background-image: url("/~oseki/image/project/malawi-top.jpg");
	background-size: cover;
	margin-top: 0;
}

/*------*/

/*ネグロスプロジェクト---*/

.project-negros{
	background-image: url("/~oseki/image/project/negros-top.jpg");
	background-size: cover;

}

/*------*/