@charset "utf-8";

@media screen and (min-width:1341px){
	.r_nav2_li a{padding:12px;}
}

@media screen and (max-width:1419px) and (min-width:1241px){
	nav{font-size:12px;}
	#g-nav-list li a{text-transform: uppercase; white-space: nowrap;}
	.r_nav1{display:flex; align-items: center; grid-column-gap: 0.4rem;}
}
@media screen and (max-width:1340px){
	.r_nav1 a,.r_nav2_li a{padding:6px;}	
}

@media screen and (min-width:1241px){
	.header {z-index: 1000;}

	.openbtn{display:none;}
#g-nav-list{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
/*    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
*/
    /* -webkit-box-align: end; */
	/*
    -ms-flex-align: end;
    align-items: flex-end;
    height: 100%;
	margin:1.5rem;
	*/
	align-items: center; grid-column-gap: 1rem;
}
	#g-nav-list li a{text-transform: uppercase;}
	.r_top{display:flex; align-items: center; grid-column-gap: 0.5rem;}
	.r_nav1{display:flex; align-items: center; grid-column-gap: 0.9rem;}
	.r_nav2{display:flex; align-items: center; grid-column-gap: 0.5rem;}
	.r_nav1 .spmenu{display:none;}
	

.r_nav1 li {display: inline-block; position: relative;}
.r_nav1 li::after {position: absolute; bottom: 10px; left: 0; content: ""; width: 100%; height: 4px; background-color: rgba(75, 202, 240, 1); opacity: 0; visibility: hidden; transition: all .3s;}
.r_nav1 li:hover::after {opacity: 0; animation-name: fadein-bottom; animation-duration: .5s; animation-timing-function: ease-out; animation-fill-mode: forwards;}
.r_nav1 li:hover::after {bottom: -3px; visibility: visible;}
.r_nav1 li:hover{animation-name: fadein-top; animation-duration: .8s; animation-timing-function: ease-out; animation-fill-mode: forwards;}

@media screen and (max-width:1340px) and (min-width:1241px){
	#g-nav-list li a{text-transform: uppercase;}
	.r_nav1{display:flex; align-items: center; grid-column-gap: 0.6rem;}
}

@keyframes fadein-bottom {
  0%{
    opacity: 0;
    transform: translateY(0);
  }
  50%{
    opacity: 0;
    transform: translateY(1px);
  }
  100%{
    opacity: 1;
    transform: translateY(5px);
  }
}	
	
@keyframes fadein-top {
  0%{
    opacity: 1;
    transform: translateY(0);
  }
  100%{
    opacity: 1;
    transform: translateY(-3px);
  }
}		
	
}

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

/******************************** hamburger *************************************/
	#g-nav{
		position:fixed;
		z-index:-1;
		opacity:0;
		transition:all 0.6s;
		top:-120%;
		right:0;
		visibility: hidden;
	}

	#g-nav.panelactive {
        opacity: 1;
        z-index: 999;
        background: #fff;
        width: 100%;
		max-width:214px;
        height: auto;
        visibility: visible;
        right: 0;
		top:0;
    }	

	.openbtn{
		position: relative;
/*		top:2px;
		right:10px;*/
		z-index:9999;
		cursor: pointer;
		width:100%;
		max-width:40px;
		height:40px;
		background:#009FDE;
		border-radius: 5px;
		display:flex;
		justify-content: center;
	}

	.openbtn span{
		display:inline-block;
		transition:all .4s;
		position:absolute;
		height:3px;
		border-radius: 2px;
		background-color:#fff;
		width:45%;		
	}

	
	.openbtn span:nth-of-type(1){top:13px;}
	.openbtn span:nth-of-type(2){top:19px;}
	.openbtn span:nth-of-type(3){top:25px;}

	.openbtn.active span:nth-of-type(1) {
		top: 14px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 26px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}

	#g-nav #g-nav-list{opacity:0; visibility: hidden;}
	#g-nav.panelactive #g-nav-list {
        position: fixed;
        z-index: 999;
        width: 100%;
		max-width:214px;
        padding: 1rem 0;
        height: auto;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
		opacity:1;
		visibility: visible;
		right:1.5%;
		top:54px;
		display: flex;
        flex-direction: column;
		border-radius: 10px 0 10px 10px;
    }	

	#g-nav.panelactive ul{display:block;}
	#g-nav li{list-style:none; text-align:center; text-transform:capitalize;}

	#g-nav.panelactive li a{display:inline-block; text-decoration: none; padding:10px 16px; width:100%; text-align: center;}
	.r_nav1.panelactive li+li{border-left:1px solid #fff;}
	#g-nav.panelactive .con{position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index:-1; background: rgba(0,0,0,.5); display: block;}
	.r_nav1 a{text-align:left; position: relative;}
	

	.main-text-box {justify-content:center;}

.header.HeightMin{
	position: fixed;
    z-index: 999;
	height:70px;
	animation: DownAnime 0.5s forwards;
	background:#fff;
}
	.r_top{align-items: center; padding: 0 1.5%;}
	.r_top span .br{display:none;}
	.r_top a p{width:22%;}
	.r_t_s{margin-left:0.5rem;}
	
	.fot_div{flex-wrap: wrap; justify-content: center; grid-row-gap: 1rem; padding-bottom:2rem;}
	.fot_div1{width:20vh;}
	.r_nav2{display:none !important;}
	body .bogo-language-switcher li{padding: 10px 16px !important;}
	body .bogo-language-switcher li a{padding: 0 !important;}

	
}

@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}	



@media screen and (min-width:1001px){
	.sp_btn{display:none;}
	
	.impact_container,.impact_container2{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
	.impact2{width:62.38%; height:408px; background:url("../img/impact2.jpg") no-repeat; background-size: cover; margin-left: auto; display: flex; align-items: flex-end; justify-content: center;}	
	.impact3{width:62.38%; height:408px; background:url("../img/impact3.jpg") no-repeat; background-size: cover; margin-left: auto; display: flex; align-items: flex-end; justify-content: center;}
	.impact4{width:62.38%; height:408px; background:url("../img/impact4.jpg") no-repeat; background-size: cover; margin-left: auto; display: flex; align-items: flex-end; justify-content: center;}
	.logo_f_sp{display:none;}
	.main1{padding:2rem 0;}
}
@media screen and (max-width:1000px){
	.main1{
		height: auto;
		min-height: 100vh;
	}	
	.main2{padding-top:3rem;}
	.p1{padding:2rem 0;}
	.p2{padding:1rem 0;}	
	
	.main-text-box{flex-wrap: wrap; position: relative; justify-content:center; text-align: center; height:auto; grid-row-gap: 1rem;}
	.main1-r{order:1;}
	.main1-l{order:2; width:100%;}
	.main1 .container{display:flex; align-items: center;}
	
	.fot_div4{padding-left:2%; padding-right:2%; justify-content: center;}
	.fot_div4 div{width:100%; text-align: center;}
	.btn2.sp_btn{width: 100%; max-width: 118px; display: flex; justify-content: center; margin: 1rem auto 0;}
	.main2_div2{flex-wrap: wrap;}
	.main2_div2 p{width:100%;}
	.main2_div2 p img{margin:0 auto;}
	.main2_div3::before,.main2_div3::after,.main3_h3::before,.main3_h3::after{width:20px; height:20px; background-size: contain;}
	.main2_div3,.main2_div4 {padding-left: 20px; padding-right: 20px;}
	.main3_h3::after{top:auto; bottom:-15px;}
	.fot_div1{order:1; width:100%;}
	.fot_div1 img{margin:0 auto;}
	.fot_div2{order:3; width:100%; flex-wrap: wrap;}
	.fot_div3{order:2;}
	.fot_div2 p{width:100%;}
	.fot_div2 p img{margin:0 auto;}
	.fot_ul .btn2 a{width: 100%; max-width: 118px; display: flex; justify-content: center; margin: 0 auto;}
	.fot_div4 p{width:100%; text-align: center;}
	
/*
	.impact1{width:100%; height:100%; z-index:-1; position: absolute; top:0; left:0;}
*/
	.sub_impact{display:flex; flex-direction: column;}
	.impact1{order:1;}
	.impact_container{order:2;}
	.impact1{width:100%; height:430px;}
	.sub_impact{height: auto;}
	.impact-l{max-width:100%; align-items: center; padding:1rem 0;}
	.impact_p{text-align: center;}
	.impact2{width:100%;}
	.sub_impact2{width:100%; height:auto; background:url("../img/impact2.jpg") center no-repeat; background-size: cover;}
	.sub_impact2::before{content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.8); z-index:1;}
	.impact_container2{z-index:2; position:relative;}
	.impact2,.impact3,.impact4{z-index:2; position: relative;}
	.impact-l2{max-width:100%; align-items: center; padding:1rem 0;}
	.sub_impact3{width:100%; height:auto; background:url("../img/impact3.jpg") center no-repeat; background-size: cover;}
	.sub_impact3::before{content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.8); z-index:1;}
	.sub_impact4{width:100%; height:auto; background:url("../img/impact4.jpg") center no-repeat; background-size: cover;}
	.sub_impact4::before{content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.8); z-index:1;}
	.logo_donation_pc{display:none;}
	.logo_f_sp img{margin:0 auto; max-width:200px;}
	
}


@media screen and (max-width:920px){
	.contact_table2 .con_table1-1 {width: 30%;}
	.donation_div4oya {grid-column-gap: 69px;}
}
@media screen and (min-width:801px){
	.con_table1-1 span{display:block;}
	.contact_box2{background: rgba(0, 168, 225, 0.2); border-radius: 20px; width:100%; max-width:470px; box-shadow: 0px 10px 60px 0px #262D7614; padding:40px; margin:2rem auto;}
	.contact_box3{background: rgba(247, 177, 20, 0.2);}
}
@media screen and (max-width:800px){
	.main1_h2{line-height: 28px;}
	.main1_p, .main1_p2{line-height: 22px;}
	.our_h2_span1{display:block;}
	.our_box1 .main2_h2{text-align: center;}
	.our3_box1 .main2_h2 span{display: block;}
	.our3_div,.involved_div2{flex-wrap: wrap; grid-row-gap: 1rem;}
	.our3_div1,.involved_div2-1{width:100%;}
	.our5_box1 .main2_h2,.our3_div1 .our3_h3{text-align: center;}
	.our5_box1 .main2_p,.our3_div1 .o3_d1_div{text-align: center;}
	.our5_box2{flex-wrap: wrap; grid-row-gap: 1rem;}
	.our5_b2-1{width:100%;}
	.our5_box1 .main2_p{text-align: center;}
	.impact2box{flex-wrap: wrap; grid-row-gap: 25px;}
	.imp2_div1{width:100%;}
	.donation_div4oya{flex-wrap: wrap;}
	.con_table1{flex-wrap: wrap; grid-row-gap: 0.6rem;}
	.con_table1-1,.con_table1-2,.contact_table2 .con_table1-1{width:100%;}
	.con_table1-1{text-align: center;}
	.con_table1-1 span{margin-left:0.5rem;}
	.contact_box{padding:33px;}
	.contact_table .wpcf7-list-item.last.has-free-text{flex-wrap: wrap;}
	.contact_table .wpcf7-list-item.last.has-free-text input[type="text"]{padding:1rem 0;}
	.contact_table2 .wpcf7-form-control.wpcf7-radio{display:flex; flex-direction: column; grid-row-gap: 1rem; width:60%; margin:0 auto;}
	.contact_accept{width:100%;}
	
	.contact_boxoya{background:#fff; border-radius: 20px; width:100%; max-width:338px; box-shadow: 0px 10px 60px 0px #262D7614; box-shadow: 5px 3px 30px 0px #00000026; padding:33px; margin:2rem auto;}
	.contactbox_btn{padding-top:2rem;}
	.tab-area .con_table1-2-2{justify-content: center;}
	.con_table1radio .con_table1-2{text-align: center;}
	.f_title_comp{font-size:26px;}
	.f_title_comp span{display:block;}
	.donatecontact_boxoya{padding:33px 37px;}
	.donate_comp1{width:75%; margin:0 auto; text-align: center;}
	.main1project{height:auto; padding-top:2rem;}
	.alumni1{padding:2.5rem 0 1rem;}
	.main2_div2involved{display:none;}
	.sub_involved{padding-top:2rem;}
}
@media screen and (min-width:561px){
	#loading{display:none;}
}
@media screen and (max-width:560px){
	.main3_div2{flex-wrap: wrap; justify-content: center; grid-row-gap: 1rem;}
	.m3_d2-r{order:1; width:30vh; margin-top:0;}
	.m3_d2-l{order:2;}
	.r2-1a, .r2-1b,.main1-r {max-width: 317px;}
	.r1-1a {max-width: 61px; max-height: 61px;}
	.r1-2a {max-width: 48px; max-height: 48px;}
	.r1-3a {max-width: 48px; max-height: 48px;}
	.r1-4a {max-width: 47px; max-height: 47px;}
	.main1-r{grid-row-gap: 0;}
	.m1-r1 {margin-bottom: -2rem;}
	.m1-r3 {margin-top: -0.5rem;}
	.main1_p span,.main1_p2 span{display: block;}
	.r_top h1 a p{display:none;}
	.r_top{justify-content: flex-end; grid-column-gap: 1rem;}
	.r_top h1 a span{text-align: right;}
	.sub_impact2,.sub_impact3,.sub_impact4{height:790px; display: flex; flex-direction: column; justify-content: center;}
	
	#loading {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999; text-align: center;}
	#maincontents {opacity: 0; transition: opacity 0.5s ease;}	
}

@media screen and (max-width:500px){
	.r2-1a, .r2-1b,.main1-r {max-width: 260px;}
	.r2-1a, .r2-1b,.m1-r2-1{height:208px;}
	.alumni_div3-1{text-align: left !important; padding:2rem 0 !important;}
	.alumni_p2{text-align: left !important;}
}

@media screen and (min-width:391px){
	.alumni2img_sp,.alumni3img_sp{display:none;}
}

@media screen and (max-width:390px){
	.alumni2img_pc,.alumni3img_pc{display:none;}
}

@media all and  (orientation: portrait) and (max-width: 857px){

}
@media all and  (orientation: landscape) and (max-width: 857px){
}