@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@300;400;500;600;700;800&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
:root{
	--mw:0 10%;
}

img{
	width: 100%;
}

a{
	text-decoration: none;
	color:#333;
}

li{
	font-family: Zen Kaku Gothic New,sans-serif;
}

h1,h2,h3,p,li,a{
	color:#333;
}

.scroll{
	display: none;
	position: relative;
}


/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:-20px;
  left:50%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:-15px;
  bottom:-15px;
    /*テキストの形状*/
  color: #333;
  font-size: 0.7rem;
  letter-spacing: 0.05em;

}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#333;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:1px;
  height: 50px;
  background:#333;
}

.fv_bg{
	background:url("../images/fv_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom;
}

.fv{
	padding:0 10%;
	position: relative;
}

.sdgs{
	padding:var(--mw);
	padding-top:10%;
	padding-bottom:10%;
}

.box_wrap{
	padding:var(--mw);
}

.action_bg{
	padding:var(--mw);
	padding-top:10%;
	padding-bottom:10%;
}

.acti_bg{
	padding:var(--mw);
	padding-top:10%;
	padding-bottom:10%;
}

.fv h1{
	background:#fff;
	display: inline-block;
	padding:10px 20px 10px 20px;
	font-size: 5vw;
	font-family: Zen Kaku Gothic New,sans-serif;
	font-weight: 800;
	vertical-align: middle;
	letter-spacing: 2px;
	margin-bottom:3%;
}

nav .logo{
	width:40%;
}

nav .menu a{
	background:#fff;
	border-radius: 50px;
	padding:3px 30px 3px 20px;
	margin:0 10px;
	border:2px solid #333;
	font-weight: 600;
  font-family: Zen Kaku Gothic New,sans-serif;
	font-size:1.2vw;
	filter: drop-shadow(4px 3px 0px rgba(0,0,0,1));
}

nav .menu a:before{
	content: "";
	color:#F9BE00;
	font-size: 1rem;
	position: relative;
	top:-2px;
	left:-2px;
}



nav{
	padding:3% 5%;
	margin-bottom:5%;
}

img.flag{
	width:20%;
	position: absolute;
	left:7%;
	top:0%;
}

img.sub{
	width:80%;
}

.tit{
	margin-top:10%;
	margin-bottom:50px;
}

.sdgs img.logo{
	margin-bottom:7%;
}

.sdgs_bg{
	background:url("../images/grid.jpg");
	background-size: 10px;
}

.cont_tit h2{
	 font-family: "Oswald", sans-serif;
	 font-weight:300;
	 font-size: 8vw;
	 color:#0083C2;
}

.cont_tit .subtit{
	font-weight: 700;
	font-family: Zen Kaku Gothic New,sans-serif;
	font-size: 2vw;
}

.cont_tit span.line{
	border-left:1px solid #333;
	height:70px;
	display: block;
	width:1px;
	margin:20px auto;
}

.cont_tit .read{
	font-weight: 500;
	line-height: 2;
	margin-bottom:50px;
	font-size: 1.2vw;
  font-family: Zen Kaku Gothic New,sans-serif;
}

.cont_tit .read span{
	font-weight: 600;
}

.vision_bg{
	background:url("../images/vision_bg.jpg");
	background-position: bottom;
	background-size: cover;
}

.vision{
	padding:10% 5%;
}


.box{
	border-radius: 20px;
	margin-bottom:30px;
}

.box .wh{
	background:#fff;
	padding-bottom:10px;
	border-radius: 0 0 20px 20px ;
	border:2px solid #333;
	border-top:0;
	filter: drop-shadow(4px 3px 0px rgba(0,0,0,1));
}

.box img{
	border-radius: 20px 20px 0 0;
	border:2px solid #333;
	border-bottom:0;
	filter: drop-shadow(4px 3px 0px rgba(0,0,0,1));
}

.box_wrap h3{
	font-weight: 800;
	font-family: Zen Kaku Gothic New,sans-serif;
	padding-top:20px;
  font-size: 2vw;
  margin-bottom:2%;
}

.box_wrap p{
	font-size:1.2vw;
	font-family: Zen Kaku Gothic New,sans-serif;
	font-weight: 500;

}

.action_bg{
	background:#F7F7F7;
}

.action_box{
	margin-bottom:17%;
}

.action_box:last-child{
	margin-bottom:0%;
}

.action_box h3{
	font-family: Zen Kaku Gothic New,sans-serif;
	font-weight: 800;
	font-size: 4vw;
	margin-bottom:10%;
}

.action_box_inner_wrap{
	margin-top:50px;
}

.action_list_wrap{
	background:#fff;
	border-radius: 10px;
	border:2px solid #333;
	filter: drop-shadow(4px 3px 0px rgba(0,0,0,1));
}

.action_list_wrap ul{
	margin:20px 0;
	padding:0;
}

.action_list_wrap ul li{
	list-style: none;
	margin:40px 0;
	font-weight: 600;
	font-size: 2vw;
	text-align: left;

}

.action_list_wrap ul li:before{
	content: "●";
	color:#0083C2;
}


.acti .cont_tit h2{
	color:#333;
}


.acti_bg{
	background:url("../images/actbg.jpg");
	background-size:200px;
}

.acti_box{
	background:#fff;
	padding:120px;
	border: 2px solid #333;
	border-radius: 20px;
	filter: drop-shadow(4px 3px 0px rgba(0,0,0,1));
}

.acti_box{
	margin-bottom:50px;
}

.acti_box:last-child{
	margin-bottom:0;
}

.acti_box h3{
	color: #ED1E79;
	font-family: Zen Kaku Gothic New,sans-serif;
	font-weight: 700;
	font-size: 2vw;
}

.acti_box p{
	font-family: Zen Kaku Gothic New,sans-serif;
	font-weight: 700;
	font-size: 1.2vw;
	line-height: 2;
	margin-top:5%;
}

.acti_box ul{
	margin-top:3%;
	padding-left:0;
	font-family: Zen Kaku Gothic New,sans-serif;
}

.acti_box ul li{
	list-style: none;
	margin:20px 0;
	font-family: Zen Kaku Gothic New,sans-serif;
	font-weight: 600;
	font-size: 1.2vw;
	line-height: 1.5;
}

.acti_box ul li:before{
	content: "●";
	color:#F4CA00;
	margin-left:-3%;
}

footer{
	background:#9FDDEF;
	padding:20px 0;
	color:#fff;
	position: relative;
}

footer a{
	color:#fff;
}

footer img{
	position: absolute;
	width:5%;
	top:-300%;
	right: 10%;
}

.acti_box ul{
	position: relative;
	right:-1%;
	padding:0 20px;
}


.sticy_cont{
	position: sticky;
	top:0;
	z-index: -1;
}

.vision{
	position: relative;
}

.hu1{
	position: absolute;
	bottom:0;
	right:2%;
	z-index: 10;
	width:17%;
}

.fv_bg{
	animation: scale linear; /* アニメーションを指定。イージングはlinear */
  animation-timeline: scroll();
}



@keyframes scale {
  from {
    background-size:105%;
  }
  to {
    background-size:300%;
  }
}


.acti_bg{
	position: relative;
}

.hu2{
	position: absolute;
	top:2%;
	left:3%;
	width:14%;
}

.page_top img{
	transition: .5s;
	transform: translateY(0px);
}

.page_top img:hover{
	transform: translateY(10px);
}

.bar img{
	height:100%;
	object-fit: cover;
}

.bar{
	display: grid;
}

.acti_box_inner{
	padding:0 20px;
}

@media screen and (max-width:2400px) {
	nav .menu a:before{
		content: "●";
	
	}

}

@media screen and (max-width:1800px) {
	:root{
			--mw:0 10%;
		}

	nav .menu a{
		font-size:1.3rem;
			border-radius: 20px;
	}

	nav .menu a:before{
		content: "●";
		top:-3px;
		font-size:0.5rem;
	}

	footer img{
		position: absolute;
		width:100px;
		top:-50px;
		right: 10%;
	}

	.scroll{
		display: block;
	}
}



@media screen and (max-width:1200px) {
	:root{
		--mw:0 10%;
	}

	.fv_img{
		position: absolute;
		bottom:0;
		right:5%;
	}


	.fv h1{
		font-size: clamp(2.25rem, 0.1389rem + 4.3981vw, 3.4375rem);
	}

	.acti_box_inner{
		padding:0 0px;
	}

	.action_list_wrap ul li{
		font-size: clamp(1rem, 0.1111rem + 1.8519vw, 1.5rem);
	}

	.acti_box p{
		font-size: clamp(0.875rem, 0.4306rem + 0.9259vw, 1.125rem);
	}

	.acti_box ul li{
		font-size: clamp(1rem, 0.7778rem + 0.463vw, 1.125rem);
	}

	.cont_tit .subtit{
		font-size: clamp(1.25rem, 0.1389rem + 2.3148vw, 1.875rem);
	}

	.cont_tit .read{
		font-size: clamp(1rem, 0.7778rem + 0.463vw, 1.125rem);
	
	}

	.action_box h3{
		font-size: clamp(2.8125rem, 1.1458rem + 3.4722vw, 3.75rem);
	}

	.acti_box h3{

		font-size: clamp(1.4375rem, -0.0069rem + 3.0093vw, 2.25rem);
	}

	.box_wrap h3{

	  font-size: clamp(1.625rem, -0.1528rem + 3.7037vw, 2.625rem);
	   margin-bottom:4%;
		
	}

	.hu2{
		width:17%;
	}


	.box_wrap p{
		font-size: clamp(1rem, 0.1111rem + 1.8519vw, 1.5rem);
	}

	.acti_box{
		padding:50px;
	}







}

@media screen and (max-width:992px) {
	.action_list_wrap ul li{
		font-size:2.5vw;
	}



		@keyframes scale {
	  from {
	    background-size:120%;
	  }
	  to {
	    background-size:300%;
	  }
	}

	.hu1{
		width:22%;
	}

	.hu2{
		width:22%;
	}

	.acti_box ul li:before{
		margin-left:-4%;
	}
}



@media screen and (max-width:767px) {
	:root{
		--mw:0 5%;
	}

	.fv_img{
		position: static;
	}

	.fv_bg{
		background-image: url(../images/vision_bg.jpg);
	}

	nav .logo{
		width:50%;
		margin:0 auto 25px auto;
	}

	.tit{
		text-align: center;
	}

	.fv h1{
		font-size: clamp(2.5rem, 1.1607rem + 6.6964vw, 4.375rem);
	}

	img.flag{
		width:50%;
		left:20%;
		top:-1%;
	}

	.sdgs{
		padding-top:10%;
		padding-bottom:10%;
	}

	.cont_tit h2{
		font-size: 4.5rem;
	}

	.cont_tit .subtit{
		font-size: 1.5rem;
	}

	.box_wrap h3{
		font-size: 2.5rem;
	}

	.box_wrap p{
		font-size:1.2rem;
	}

	.action_list_wrap ul li{
		font-size: 1.1rem;
	}

	.acti_box h3{
		text-align: center;
		letter-spacing: -1px;
		font-size: clamp(1.1875rem, 0.25rem + 4.6875vw, 2.5rem);
	}

	.acti_box p{
		font-size:0.9rem;
	}

	.acti_box ul li{
		font-size: 1rem;
	}

	@keyframes scale {
	  from {
	    background-size:cover;
	  }
	  to {
	    background-size:cover;
	  }
	}

	.acti_box ul li:before{
		margin-left:-4%;
	}

	.acti_box_inner_img{
		width: 50%;
		margin:0 auto;
		text-align: center;
	}

	.acti_box ul li{
		font-weight: 500;
	}



	


}


@media screen and (max-width:575px) {
	nav a{
		font-size:0.8rem;

		margin:0 5px;
	}

	nav .logo{
		width:90%;
	}

	.tit{
		margin-bottom:10%;
	}

	.sdgs{
		padding-top:15%;
		padding-bottom:15%;
	}

	.box_wrap .row>*{
		padding-left:0;
		padding-right: 0;
	}

	.action_list_wrap{
		display: table;
		margin:0 auto;
		padding:5% 20%;
	}

	.box_wrap h3{
		font-size: 2rem;
	}

	.acti_box{
		padding:50px 40px;
	}

	.action_box h3{
		font-size: clamp(1.5rem, 0.25rem + 6.25vw, 2.5rem);
	}

	.acti_box ul{
		padding:0 15px;
	}

	footer img{
		position: absolute;
		width:80px;
		top:-50px;
		right: 5%;
	}

	footer{
		padding:40px 0;
	}

	.acti_box ul li:before{
		margin-left:-5%;
	}

	nav .menu a{
		font-size:0.7rem;
	}

	.acti_box{
		padding:50px 20px;
	}

	.hu1,.hu2{
		display: none;
	}

	.acti_box ul li:before{
		margin-left:-8%;
	}

	nav .menu a:before{
		top:-2px;
	}

	.action_list_wrap ul li:before{
		margin-left:-20px;
	}

	




}

	@media screen and (max-width:472px) {
		.action_list_wrap{
			width:100%;
			padding:5% 3%;
		}

		.action_list_wrap ul li{
			text-align: center;
		}

		.action_list_wrap ul li:before{
			margin-left:0px;
		}
	}