@charset "utf-8";

/*------------------------------------------------
reset
--------------------------------------------------*/
html, body, header, footer, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address , abbr, acronym, aress, article, aside, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, section,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, nav,
dl, dt, dd , ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
button, hr, time{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size:inherit;
	background: transparent;
	font-weight:inherit;  
	text-decoration:none;
	font-family:inherit;
	color:inherit;
	box-sizing:border-box;
	font-style:normal;
	text-align:left;
	list-style: none;
	position:relative;
	line-height: inherit;
	word-break: break-all;
	letter-spacing: inherit;
	text-shadow: inherit;
}
html{
	font-size: 10px;
	word-break: normal;
	-webkit-text-size-adjust: 100%;
}
body{
	font-size: 2rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	background-color: #fff;
	color: #003067;
}
body.scrollnone{
	overflow:hidden !important;
	height:100% !important;
}
img{
	vertical-align:bottom;
	max-width:100%;
    height: auto;
}
img.maxWidthNone{
	max-width:none;
}
p,th,td{
	line-break: strict;
    line-height: 2;
	word-break: normal !important;
	word-wrap: break-word;
}
a,
.pointer,
button,
input[type="submit"]{
    cursor: pointer;
    transition: all 0.3s ease;
	text-decoration: none;
}
a:hover,
.pointer:hover,
button:hover,
input[type="submit"]:hover{
    opacity: 0.7;
}
p > a{
	text-decoration: underline;
}
main{
	overflow: hidden;
}
.nolink{
	pointer-events: none;
}
@media only screen and (max-width: 810px) {
	a:hover,
	.pointer:hover,
	button:hover,
	input[type="submit"]:hover{
		opacity: 1;
		transition: none;
	}
}
h1,h2,h3,h4,h5{
	line-height: 1.5;
}


/*------------------------------------------------
layout
--------------------------------------------------*/
.absolute{
	position:absolute;
}
.absolute img,
img.absolute{
	max-width:none;
}
.flexSpace{
	display: -webkit-box; /*Android4.3*/
	display: -moz-box;    /*Firefox21*/
	display: -ms-flexbox; /*IE10*/
	display: -webkit-flex; /*PC-Safari,iOS8.4*/
	display: flex;
	-ms-flex-wrap:wrap;/*IE10*/
	-webkit-flex-wrap:wrap;/*PC-Safari,iOS8.4*/
	flex-wrap:wrap;
	-webkit-box-pack: justify; /*Android4.3*/
	-moz-box-pack: justify;    /*Firefox21*/
	-ms-flex-pack: justify;    /*IE10*/
	-webkit-justify-content: space-between; /*PC-Safari,iOS8.4*/
	justify-content: space-between;
}
.flexStart{
	display: -webkit-box; /*Android4.3*/
	display: -moz-box;    /*Firefox21*/
	display: -ms-flexbox; /*IE10*/
	display: -webkit-flex; /*PC-Safari,iOS8.4*/
	display: flex;
	-ms-flex-wrap:wrap;/*IE10*/
	-webkit-flex-wrap:wrap;/*PC-Safari,iOS8.4*/
	flex-wrap:wrap;
}
.flexCenter{
	display: -webkit-box; /*Android4.3*/
	display: -moz-box;    /*Firefox21*/
	display: -ms-flexbox; /*IE10*/
	display: -webkit-flex; /*PC-Safari,iOS8.4*/
	display: flex;
	-ms-flex-wrap:wrap;/*IE10*/
	-webkit-flex-wrap:wrap;/*PC-Safari,iOS8.4*/
	flex-wrap:wrap;
	-webkit-box-pack: center; /*Android4.3*/
	-moz-box-pack: center;    /*Firefox21*/
	-ms-flex-pack: center;    /*IE10*/
	-webkit-justify-content: center; /*PC-Safari,iOS8.4*/
	justify-content: center;
}
.flexEnd{
	display: -webkit-box; /*Android4.3*/
	display: -moz-box;    /*Firefox21*/
	display: -ms-flexbox; /*IE10*/
	display: -webkit-flex; /*PC-Safari,iOS8.4*/
	display: flex;
	-ms-flex-wrap:wrap;/*IE10*/
	-webkit-flex-wrap:wrap;/*PC-Safari,iOS8.4*/
	flex-wrap:wrap;
	-webkit-justify-content:flex-end;         /* Safari etc. */
	-ms-justify-content:flex-end;         /* IE10        */
	justify-content:flex-end;
}
.flexReverse{
	flex-direction: row-reverse;
}
.flexSpace.center,
.flexStart.center,
.flexEnd.center,
.flexCenter.center{
	align-items: center;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.container1080{
	width: 1080px;
	margin-left: auto;
	margin-right: auto;
}


/*------------------------------------------------
margin
--------------------------------------------------*/
.mt24{ margin-top: 24px;}
.mt48{ margin-top: 48px;}
.mt64{ margin-top: 64px;}
.pt64{ padding-top: 64px;}
.pt128{ padding-top: 128px;}
.pt192{ padding-top: 192px;}
.pb64{ padding-bottom: 64px;}
.pb128{ padding-bottom: 128px;}
.pb192{ padding-bottom: 192px;}

/*------------------------------------------------
font
--------------------------------------------------*/
.oswald{
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
}
.fz18{ font-size: 1.8rem;}
.fz2{ font-size: 2.2rem;}
.fz34{ font-size: 3.4rem;}
.fz38{ font-size: 3.8rem;}
.fz40{ font-size: 4rem;}
.fz54{ font-size: 5.4rem;}
.fw700{ font-weight: 700;}
.taCenter{ text-align: center;}



/*------------------------------------------------
color
--------------------------------------------------*/
.orange{ color: #ed6a02;}
.bg_gray{ background-color: #e1dedc;}
.bg_navy{
	background-color: #0c2347;
	color: #FFF;
}

/*------------------------------------------------
common
--------------------------------------------------*/
.scroll_fadein{
	opacity: 0;
	visibility: hidden;
}
@keyframes fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
body.scroll .scroll_fadein{
	opacity: 1;
	visibility: visible;
	animation: fadein 0.3s ease;
}
.objectfit{
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}


/*------------------------------------------------
content
--------------------------------------------------*/
#header{
	background: url("../images/header_bg.jpg") no-repeat center center;
	background-size: cover;
	width: 100%;
	height: 100svh;
	min-height: 850px;
}
#header .inner{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#header h1{
	background: url("../images/header_h1.png") no-repeat center center;
	background-size: 100%;
	width: 900px;
	height: 170px;
	text-indent: -9999px;
	margin: 0 auto;
}
#header .text{
	text-shadow: 0 0 4px #FFF, 0 0 5px #FFF, 0 0 6px #FFF, 0 0 7px #FFF, 0 0 8px #FFF;
	margin: 20px 0 40px;
}
#header .image{
	width: 595px;
	max-width: 100%;
	margin: 0 auto;
}
.section_header{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
#sec01 .section_header{
	background-image: url("../images/sec01_bg.jpg");
}
#sec02 .section_header{
	background-image: url("../images/sec02_bg.jpg");
}
.section_header h2{
	line-height: 1;
}
.section_header h2 .jp{
	margin-left: 16px;
}
.section_header h2:before,
.section_header h2:after{
	content: "";
	display: block;
	background: url("../images/border01.png") no-repeat center center;
	background-size: 350px;
	width: 100%;
	height: 11px;
}
.section_header h2:before{
	margin-bottom: 16px;
}
.section_header h2:after{
	margin-top: 16px;
}
.sdgs_list li{
	aspect-ratio: 1 / 1;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: -9999px;
}
.sdgs_list li.sdgs_list_01{ background-image: url("../images/icon_sdgs_01.png");}
.sdgs_list li.sdgs_list_02{ background-image: url("../images/icon_sdgs_02.png");}
.sdgs_list li.sdgs_list_03{ background-image: url("../images/icon_sdgs_03.png");}
.sdgs_list li.sdgs_list_04{ background-image: url("../images/icon_sdgs_04.png");}
.sdgs_list li.sdgs_list_05{ background-image: url("../images/icon_sdgs_05.png");}
.sdgs_list li.sdgs_list_06{ background-image: url("../images/icon_sdgs_06.png");}
.sdgs_list li.sdgs_list_07{ background-image: url("../images/icon_sdgs_07.png");}
.sdgs_list li.sdgs_list_08{ background-image: url("../images/icon_sdgs_08.png");}
.sdgs_list li.sdgs_list_09{ background-image: url("../images/icon_sdgs_09.png");}
.sdgs_list li.sdgs_list_10{ background-image: url("../images/icon_sdgs_10.png");}
.sdgs_list li.sdgs_list_11{ background-image: url("../images/icon_sdgs_11.png");}
.sdgs_list li.sdgs_list_12{ background-image: url("../images/icon_sdgs_12.png");}
.sdgs_list li.sdgs_list_13{ background-image: url("../images/icon_sdgs_13.png");}
.sdgs_list li.sdgs_list_14{ background-image: url("../images/icon_sdgs_14.png");}
.sdgs_list li.sdgs_list_15{ background-image: url("../images/icon_sdgs_15.png");}
.sdgs_list li.sdgs_list_16{ background-image: url("../images/icon_sdgs_16.png");}
.sdgs_list li.sdgs_list_17{ background-image: url("../images/icon_sdgs_17.png");}
.section_header .sdgs_list li{
	width: calc((100% - 70px) / 7);
	margin: 0 5px;
}
.action_list li{
	border-bottom: 2px dashed #FFF;
	background-position: left 14px;
	background-repeat: no-repeat;
	background-size: 45px;
	padding: 15px 0 15px 64px;
	min-height: 73px;
}
.action_list li.action_list_01{
	background-image: url("../images/action_list_01.png");
}
.action_list li.action_list_02{
	background-image: url("../images/action_list_02.png");
}
.action_list li.action_list_03{
	background-image: url("../images/action_list_03.png");
}
.action_list li.action_list_04{
	background-image: url("../images/action_list_04.png");
}
.action_list li.action_list_05{
	background-image: url("../images/action_list_05.png");
}
.action_list li.action_list_06{
	background-image: url("../images/action_list_06.png");
}
.action_list li.action_list_07{
	background-image: url("../images/action_list_07.png");
}
.action_list li.action_list_08{
	background-image: url("../images/action_list_08.png");
}
.action_list li.action_list_09{
	background-image: url("../images/action_list_09.png");
}
.detail_list li .image{
	width: 50%;
}
.detail_list li .image img{
	float: right;
	max-width: none;
	width: 640px;
}
.detail_list li .flexReverse .image img{
	float: left;
}
.image .caption{
	position: absolute;
	z-index: 9;
	color: #FFF;
	text-shadow: 0 0 4px rgba(0,0,0,0.4);
	right: 8px;
	bottom: 8px;
}
.detail_list li .flexReverse .image .caption{
	left: 8px;
	right: auto;
}
.detail_list li .text{
	width: calc(50% - 40px);
}
.detail_list li .text .sdgs_list li{
	width: 80px;
	margin-right: 8px;
}
.border02{
	width: 100%;
	height: 2px;
	background: url("../images/border02.png") repeat-y center center;
	background-size: 100%;
}
#footer .links li{
	width: 300px;
	margin: 0 10px;
}


/*------------------------------------------------
sp
--------------------------------------------------*/
.sp_inline,
.sp_block,
.sp_flex,
.spPageNav{
	display: none;
}
@media screen and (max-width: 480px){
	html{
		font-size: 7px;
	}
	.sp_inline{ display: inline;}
	.sp_block{ display: block;}
	.sp_flex{ display: flex;}
	.sp_none{ display: none;}
	
	/*------------------------------------------------
	layout
	--------------------------------------------------*/
	.container1080{
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
	}


	
	/*------------------------------------------------
	margin
	--------------------------------------------------*/
	.mt48{ margin-top: 24px;}
	.mt64{ margin-top: 32px;}
	.pt128{ padding-top: 64px;}
	.pt192{ padding-top: 96px;}
	.pb128{ padding-bottom: 64px;}
	.pb192{ padding-bottom: 96px;}

	
	/*------------------------------------------------
	font
	--------------------------------------------------*/
	.fz38{ font-size: 3rem;}
	.fz54{ font-size: 4rem;}






	/*------------------------------------------------
	content
	--------------------------------------------------*/
	#header{
		min-height: 0;
	}
	#header .inner{
		padding: 20px;
		width: 100%;
	}
	#header h1{
		width: 100%;
		height: 20vw;
	}
	#header .text{
		text-align: left;
	}
	#header .text br{
		display: none;
	}
	.section_header h2::before,
	.section_header h2::after{
		background-size: 330px;
	}
	.action_list li{
		background-size: 35px;
		min-height: 63px;
		padding-left: 55px;
	}
	.sdgs_list li{
		width: calc((100% - 50px) / 5) !important;
		margin: 0 5px 10px !important;
	}
	.detail_list li .image{
		width: 100%;
	}
	.detail_list li .image img{
		float: none !important;
		width: 100%;
	}
	.detail_list li .text{
		width: 100%;
		margin-top: 32px;
	}
	#footer .links li{
		margin: 10px 0;
		width: 100%;
	}
	.image .caption{
		right: 8px !important;
		left: auto !important;
	}

	

	
	
	
	
	
	
	
	
	
	
}