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

.start {
	background: #0098D8;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9000;
}
.start p {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
	width: 600px;
}

.start p img {
    width: 100%;
    text-align: center;
}

.popup{
    opacity: 0;
}

.popup.is-animated {
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
  }
   
  @keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
      }
      80% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
  }
  

/*-----------------------------------------------------------*/
/*ヘッダー*/

#header_wrap{
   
   
    height: 720px;
    padding-bottom: 200px;
	
}

#header_wrap #header{

    margin: auto;
    position: relative;

}

#header_wrap #header dl{
    width: 100vw;
    display: flex;
    justify-content: space-between;
}



#header_wrap #header dl dt{
    width: 60%;
    text-align: center;
    margin-top: 60px;
}


#header_wrap #header dl dt img{
    width: 100%;

}
#header_wrap #header dl dd{
    width: 40%;
    height: 600px;
    background-color: #0098D8;
	
}

#header_wrap #header .page_tit{
    width: 50%;
    margin-left: 160px;
}

#header_wrap #header .page_tit img{
    margin-top: 80px;
    max-width: 245px;

}

#header_wrap #header .sdgs{
    background-color: #fff;
    margin-top: 10%;
    padding-top: 10%;
    padding-left: 160px;
   display: flex;
}

#header_wrap #header .sdgs img{
   /* max-width: 245px;*/
   
}
#header_wrap #header h1{
	color: #fff;
    font-size: 22px;
    text-align: left;
    letter-spacing : 2.2px;
}









#header_wrap #header ul.sdgs_menu{
    position: absolute;
    top: 0;
    max-width: 60vw;
	display: flex;
    flex-wrap: wrap;
    margin-top: 70px;
    justify-content: center;
    margin-left: 10%;
}

#header_wrap #header ul.sdgs_menu li{
    width: 49%;
    max-width: 412px;
    padding: 0.5%;
}


#header_wrap #header ul.sdgs_menu li img{
	width: 100%;
}


#header_wrap #header h1 img{
    width: 245px;
    height: auto;
    padding-top: 100px;
}

#header_wrap #header h1 p{
    text-align: left;
}

#header_wrap #header .nav_inner{
	margin-right: 3.04vw;/*45*/
}

#header_wrap #header .nav_inner ul{
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

#header_wrap #header .nav_inner ul li{
	margin: 0 1.49vw;/*0 22*/
}

#header_wrap #header .nav_inner ul li:first-child{
	margin-left: 0;
}

#header_wrap #header .nav_inner ul li:last-child{
	margin-right: 0;
}

#header_wrap #header .head_contact{
	height: 7.16vw;/*106*/
}

#header_wrap #header .head_contact img{
	width: auto;
	height: 100%;
}

#header_wrap #header .nav_inner ul li a{
	font-size: 1.01vw;/*15*/
	
}

/*-----------------------------------------------------------*/

#page_area{

}

/*-----------------------------------------------------------*/



/*-----------------------------------------------------------*/

.totop {

    width: 5.14vw;
    height: 5.14vw;
    position: fixed;
    bottom: 5.50vw;
    right: 2.50vw;
    z-index: 5;
}

.totop a{

}


/*-----------------------------------------------------------*/


/*-----------------------------------------------------------*/

#contents section{
    width: 100%;
    margin: 5.0vw auto;
    

}



/**/

#contents section .inner .listwrap{
    width: 100%;
    margin: 2.5vw auto 0px;
    
}

#contents section .inner .listwrap ul{
    display: flex;
}

#contents section .inner .listwrap ul li{
    list-style-type: none;
    width: calc( 100% / 3 - 30px );
    margin: auto 15px;
}


/*-----------------------------------------------------------*/
.blue{
    color: #0071B7;

}


.orange{
    color: #E07B2F;
}

.orange02{
    color: #EC5A24;
}



.green{
    color: #00973B;
    
}
/*-----------------------------------------------------------*/

.block01{

}

.block01 h2{
    text-align: center;
    font-size : 25px;
    margin-bottom: 50px;
    line-height : 39px;
    letter-spacing : 2.5px;
    font-weight: 500;
    color : #0098D8;
    color : rgb(0, 152, 216);
    
}

/*-----------------------------------------------------------*/

.block01 .inner{
    max-width: 1000px;
    margin: auto;

}

/*-----------------------------------------------------------*/


.block02{
    
}

.block02 .inner{
    margin-top: 200px;

}

.block02 .inner dl.tit{
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.block02 .inner dl.tit dt{

}

.block02 .inner dl.tit dt h2{
    font-size : 1.9rem;
    letter-spacing : 2.3px;
    font-weight: 500;

}


.block02 .inner dl.tit dt h2 p{
  font-family : Josefin Sans;
  font-weight : bold;
  font-size : 54px;
  line-height : 73.23px;
  letter-spacing : 5.4px;
  margin-bottom: 20px;

}

.block02 .inner dl.tit dt h2 span{
    font-size: 5rem;
    font-weight: 600;
    margin-right: 10px;

}

.block02 .inner dl.tit dt{
    width: 35%;
    padding-left: 10%;
    margin-top: -30px;
}

.block02 .inner dl.tit dd{
    z-index: -1;

}

.block02 .sdgs{
    margin-top: -20px;
    position: absolute;
    left: 10%;

}

.block02 .sdgs img{
    width: 50%;

}

.block02 .box01{
    margin-top: 100px;


}

.block02 .box01 dl{
    width: 60%;
    
    display: flex;
    align-items: center;
    text-align: center;
    background: #0071B7;
    height: 360px;
    position: relative;
}

.block02 .box01 dl dt{
    width: 60%;
    font-size : 27px;
    line-height : 64px;
    letter-spacing : 5.4px;
    color : #FFFFFF;
    background : #0071B7;
    padding: 100px;
}

.block02 .box01 dl dd{
    width: 60%;
    position: absolute;
    left: 90%;
    top: 40px;
}

.block02 .box01 dl dd img{
    max-width: 553px;

}

.block02 .box02{
    max-width: 1000px;
    margin: auto;
    margin-top: 180px;

}

.block02 .box02 ul li{
    margin: 60px 0 80px;
   
}

.block02 .box02 ul li dl.box_img{
    display: flex;

}

.block02 .box02 ul li dl.box_img dt{
    width: 60%;
    margin-right: 50px;

}

.block02 .box02 ul li dl.box_img dd{


}

.block02 .box02 ul li dl.box_list span{
    margin-right: 1.5rem;
   
}

.block02 .box02 ul li dl.box_list dt{
    color: #4D4D4D;
    font-size : 25px;
    letter-spacing : 2.5px;
    width: 100%; 
    margin-bottom: 20px;
}

.block02 .box02 ul li dl.box_list dt span.box_list_br{
    margin-left: 2em;
}



.block02 .box02 dl.img{
    display: flex;
    justify-content: center;
   
}

.block02 .box02 dl.img dt{
    padding: 6px;
}

.block02 .box02 dl.img dd{
    padding: 6px;
    
}

.block02 .box02 .img p{
    text-align: center;
   
}


/*-----------------------------------------------------------*/

.block02.block03 .box01 dl {
    width: 60%;
    display: flex;
    align-items: center;
    text-align: center;
    background: #E07B2F;
    height: 360px;
    position: relative;
}

.block02.block03 .box01 dl dt {
    width: 60%;
    font-size: 27px;
    line-height: 64px;
    letter-spacing: 5.4px;
    color: #FFFFFF;
    background: #E07B2F;
    padding: 100px;
}

.block02.block03 .box02 dl.img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 60px
}


/*-----------------------------------------------------------*/

.block02.block04 .box01 dl {
    width: 60%;
    display: flex;
    align-items: center;
    text-align: center;
    background: #00973B;
    height: 360px;
    position: relative;
}

.block02.block04 .box01 dl dt {
    width: 60%;
    font-size: 27px;
    line-height: 64px;
    letter-spacing: 5.4px;
    color: #FFFFFF;
    background: #00973B;
    padding: 100px;
}

.block02.block04 .box02 dl.img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 60px;
}


/*-----------------------------------------------------------*/

.fot {
   background-color: #E5F2F9;
}

.fot ul {
    padding: 100px 0;
    margin: auto;
    max-width: 830px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   
}

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

.fot ul li dl dt img{
    max-width: 400px;
 }

 .fot ul li dl dd {
    font-size: 15px;
    display: flex;
    align-items: center;
    /* text-align: center; */
    margin-top: -20px;
    justify-content: center;
 }


.fot ul li dl dd img{
    width: 17px;
    margin-left: 20px;
 }

.fot img {
   
}

.fot .copy {
    background-color: #0098D8;  
}


.fot .copy dl {
    width: 70%;
    margin: auto;
    display: flex;
    padding: 20px;
    justify-content: space-between;
    color: #fff;
    padding: 20px 100px;
   
}

.fot .copy dl dt {
    font-family: Josefin Sans;
    font-weight: bold;
    letter-spacing : 3.15px;
    font-size: 26px;
   
   
}


.fot .copy dl dd {
    font-weight: bold;
    letter-spacing : 1.6px;

   
   
}