@charset "UTF-8";

html{
	font-size:22px;
}
@media screen and (max-width: 1280px){
html{
	font-size:18px;
}
}
@media screen and (max-width: 680px){
html{
	font-size:14px;
}
}
.slinky-menu a {
	font-size:16px;
}
#SDGs main p,
#SDGs main figcaption,
#SDGs main dl{
	font-family:'UD Shin Go NT Medium', 'UD新ゴNT M',
				'Kozuka Gothic Pr6N R', 'Kozuka Gothic Pr6N', '小塚ゴシック Pro R', '小塚ゴシック Pr6N',
				'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
				'Osaka',
				'ＭＳ Ｐゴシック',
				sans-serif;
	color:#231815;
}
#SDGs main h2,
#SDGs main h3,
#SDGs .font-kozukaM{
	font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R',
				'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3',
				'ＭＳ Ｐ明朝',
				'Times', 'Times New Roman',
				serif;
}
.flex-row{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}
.br-pc{
	display:block;
}
.br-sp{
	display:none;
}
@media screen and (max-width: 480px){
.br-pc{
	display:none;
}
.br-sp{
	display:block;
}
.br-sp + span{
	padding-left:8px;
}
}
/*-----------------------------------------------------------------------------------
メインビジュアル
-----------------------------------------------------------------------------------*/
#topmainimg{
	position:relative;
}
#topmainimg.index,
#topmainimg.action{
	height:calc(100vh - 76px);
}
#topmainimg .flexslider,
#topmainimg .mainvisual-img,
#topmainimg .mainvisual-img img{
	height:inherit;
}
#topmainimg .mainvisual-img img{
	width:100%;
	object-fit: cover;
}
#topmainimg .mainvisual-heading{
	display: block;
	position: absolute;
	z-index: 10;
	color:#fff;
}
#topmainimg.index .mainvisual-heading{
	top:30px;
	right:10%;
	font-family:'Kozuka Mincho Pro', 'Kozuka Mincho Std', '小塚明朝 Pro R', '小塚明朝 Std R',
				'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3',
				'ＭＳ Ｐ明朝',
				'Times', 'Times New Roman',
				serif;
	text-align:right;
}
#topmainimg.index .mainvisual-heading h1{
	font-size:2.2rem;
}
#topmainimg.action .mainvisual-heading{
	right:0;
	left:0;
	margin:auto;
	top: 50%;
	transform: translateY(-50%);
	text-align:center;
}
#topmainimg.action .mainvisual-heading h1{
	font-size:1.4rem;
	font-family:'UD Shin Go NT Medium', 'UD新ゴNT M',
				'Kozuka Gothic Pr6N R', 'Kozuka Gothic Pr6N', '小塚ゴシック Pro R', '小塚ゴシック Pr6N',
				'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
				'Osaka',
				'ＭＳ Ｐゴシック',
				sans-serif;
}
#topmainimg.action .mainvisual-heading span{
	padding:2px 16px;
	background-color:rgba(0, 0, 0, 0.3);
	color:#fff;
	line-height:2;
}
@media screen and (max-width: 1642px){
#topmainimg.action{
	height:39.3vw;
}
}
@media screen and (max-width: 680px){
#topmainimg.index .mainvisual-heading h1{
	font-size:1.8rem;
}

#topmainimg.action .mainvisual-heading h1{
	font-size:1.35rem;
}
#topmainimg.action .mainvisual-heading span{
	padding:0 8px;
}
}
@media screen and (max-width: 480px){
#topmainimg.action .mainvisual-heading{
	top: 150%;
}
#topmainimg.index .mainvisual-heading h1{
	display:none;
}
#topmainimg.action .mainvisual-heading h1{
	font-size:0.9rem;
}
#topmainimg.action .mainvisual-heading p{
	font-size:1rem;
}
#topmainimg.action .mainvisual-heading span{
	background:none;
	color:#231815;
	line-height:1;
}
}
@media screen and (max-width: 380px){
#topmainimg.index .mainvisual-heading h1{
	font-size:1.5rem;
}
#topmainimg.action .mainvisual-heading h1{
	font-size:11px;
}
}
@media screen and (max-width: 280px){
#topmainimg.index .mainvisual-heading h1{
	font-size:1.3rem;
}
#topmainimg.action .mainvisual-heading h1{
	font-size:10px;
}
#topmainimg.action .mainvisual-heading p{
	font-size:0.9rem;
}
}
/*-----------------------------------------------------------------------------------
トップページ
-----------------------------------------------------------------------------------*/
#supportSDGs .container{
	padding:120px 0;
	margin-bottom:120px;
	background-color:#e0d9d1;
}
#supportSDGs .wrapper{
	text-align:center;
}
#supportSDGs .wrapper h2{
	font-size:2.2rem;
}
#supportSDGs .wrapper p{
	font-size:1.4rem;
	margin-top:60px;
	margin-bottom:120px;
}
#supportSDGs .wrapper figure img{
	margin-bottom:60px;
}
#supportSDGs .wrapper img{
	width:100%;
}
#supportSDGs .wrapper figure{
	font-size:0.8rem;
}
@media screen and (max-width: 680px){
#supportSDGs .container{
	padding:60px 0;
	margin-bottom:60px;
}
#supportSDGs .wrapper h2{
	font-size:1.8rem;
}
#supportSDGs .wrapper p{
	margin-top:30px;
	margin-bottom:60px;
}
}
@media screen and (max-width: 380px){
#supportSDGs .wrapper h2{
	font-size:1.6rem;
}
#supportSDGs .wrapper p{
	font-size:1.2rem;
}
}
@media screen and (max-width: 280px){
#supportSDGs .wrapper h2{
	font-size:1.4rem;
}
#supportSDGs .wrapper p{
	font-size:1rem;
}
}
/*-----------------------------------------------------------------------------------
SDGs ４つの取り組み
-----------------------------------------------------------------------------------*/
#actionSDGs .wrapper{
	width:100%;
	max-width:1672px;
	text-align:center;
}
#actionSDGs .wrapper h2{
	font-size:2.5rem;
	font-family:'UD Shin Go NT Medium', 'UD新ゴNT M',
				'Kozuka Gothic Pr6N R', 'Kozuka Gothic Pr6N', '小塚ゴシック Pro R', '小塚ゴシック Pr6N',
				'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
				'Osaka',
				'ＭＳ Ｐゴシック',
				sans-serif;
}
#actionSDGs .wrapper h2 span{
	font-size:3.4rem;
}
#actionSDGs .wrapper p{
	font-size:1.4rem;
}
#actionSDGs .action-container{
	margin-bottom:160px;
}
#actionSDGs .action-container .col-2{
	flex: 0 0 25%;
	max-width: 25%;
}
#actionSDGs .action-box{
	position:relative;
	box-sizing:border-box;
	height:100%;
	margin:0 0.75rem;
	padding:0.75rem;
	background-color:#eaf6fd;
	text-align:left;
}

#actionSDGs .action-box img{
	width:100%;
}
#actionSDGs .action-box h3{
	position:relative;
	display: flex;
	align-items: center;
	height:129px;
	margin-left:18%;
	padding-left:12px;
	border-left:2.3px solid #2ea7e0;
	color:#2ea7e0;
	font-size:1.4rem;
}
body{
	counter-reset:action;
}
#actionSDGs .action-box h3::before{
	content:'';
	position:absolute;
	left:-18%;
	counter-increment:action;
	content:counter(action);
	font-size:2.2rem;
}
#actionSDGs .action-box figure{
	margin-bottom:24px;
}
#actionSDGs .action-box p{
	margin-bottom:33px;
	font-size:1rem;
}
#actionSDGs .action-box .btn-mp{
	position:absolute;
	bottom:0.75rem;
	right:0.75rem;;
	font-size:1rem;
}
#actionSDGs .action-box .btn-mp span{
	position:relative;
	font-family:'UD Shin Go NT Medium', 'UD新ゴNT M',
				'Kozuka Gothic Pr6N R', 'Kozuka Gothic Pr6N', '小塚ゴシック Pro R', '小塚ゴシック Pr6N',
				'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3',
				'Osaka',
				'ＭＳ Ｐゴシック',
				sans-serif;
}
#actionSDGs .action-box .btn-mp span::before{
	content:'';
	position:absolute;
	top:50%;
	left:-16px;
	margin-top:-10px;
	border:10px solid transparent;
	border-left:14px solid #000;
}
#actionSDGs .action-box a:hover img,
#actionSDGs .action-box a:hover h3,
#actionSDGs .action-box a:hover .btn-mp span{
	transition:all 0.3s ease;
	opacity:0.3;
}
@media screen and (max-width: 1280px){
#actionSDGs .wrapper{
	width:100%;
}
#actionSDGs .action-box h3{
	height:97px;
}
#actionSDGs .action-container .col-2{
	flex: 0 0 50%;
	max-width: 50%;
}
}
@media screen and (max-width: 680px){
#actionSDGs .wrapper h2{
	font-size:1.8rem;
}
#actionSDGs .wrapper h2 span{
	font-size:2.8rem;
}
#actionSDGs .action-box h3{
	height:70px;
}
#actionSDGs .action-box .btn-mp span::before{
	left:-11px;
	margin-top:-7px;
	border:7px solid transparent;
	border-left:9.8px solid #000;
}
}
@media screen and (max-width: 480px){
#actionSDGs .action-container .col-2{
	flex: 0 0 100%;
	max-width: 100%;
	margin-bottom:0.75rem;
}
}
@media screen and (max-width: 380px){
#actionSDGs .wrapper p{
	font-size:1.2rem;
}
}
@media screen and (max-width: 280px){
#actionSDGs .wrapper p{
	font-size:1rem;
}
}
/*-----------------------------------------------------------------------------------
SDGsとは
-----------------------------------------------------------------------------------*/
#aboutSDGs .wrapper{
	width:1280px;
	overflow:hidden;
}
#aboutSDGs h2{
	text-align:center;
}
#aboutSDGs h2 img{
	width:715px;
}
#aboutSDGs .SDGs-container{
	margin-bottom:48px;
}
#aboutSDGs .SDGs-container img{
	width:calc(100% - 24px);
	height:auto;
	margin-bottom:24px;
}
#aboutSDGs .SDGs-container .col-3{
	flex: 0 0 16.6667%;
	max-width: 16.6667%;
	line-height:0;
}
#aboutSDGs .about-box{
	padding:25px 68px 40px 68px;
	background-color:#eaf6fd;
}
#aboutSDGs .about-box h3{
	margin-bottom:24px;
	color:#7f4f21;
	font-size:1.4rem;
	line-height:1;
	text-align:center;
}
#aboutSDGs .about-box p{
	font-size:1rem;
	margin-bottom:0;
}
@media screen and (max-width: 1280px){
#aboutSDGs .wrapper{
	width:calc(100% - 12px);
	margin-left:12px;
}
#aboutSDGs h2 img{
	width:55%;
}
#aboutSDGs .SDGs-container img{
	width:calc(100% - 12px);
	margin-bottom:12px;
}
}
@media screen and (max-width: 680px){
#aboutSDGs h2 img{
	width:75%;
}
#aboutSDGs .SDGs-container .col-3{
	flex: 0 0 33.3334%;
	max-width: 33.3334%;
}
#aboutSDGs .about-box{
	padding:25px 34px 40px 34px;
}
}
/*-----------------------------------------------------------------------------------
ナビゲーション
-----------------------------------------------------------------------------------*/
#navSDGs ul{
	width:1280px;
	margin:68px auto;
	padding-top:20px;
	padding-left:0;
	background-color:#eaf6fd;
	text-align:center;
	list-style:none;
}
#navSDGs ul li{
	display:inline-block;
	width:600px;
	margin:0 12px 20px;
	background-color:#9fd9f6;
	font-size:1rem;
	text-align:left;
}
#navSDGs ul li.selected{
	box-sizing:border-box;
	padding:14px 20px;
	background-color:#2ea7e0;
	color:#fff;
}
#navSDGs ul li a{
	display:block;
	padding:14px 20px;
	color:#fff;
}
@media screen and (max-width: 1280px){
#navSDGs ul{
	width:100%;
}
#navSDGs ul li{
	width:450px;
}
}
@media screen and (max-width: 680px){
#navSDGs ul{
	margin:34px auto;
}
#navSDGs ul li{
	width:calc(100% - 24px);
}
}
@media screen and (max-width: 480px){
#navSDGs ul{
	margin:37% auto 34px;
}
}
/*-----------------------------------------------------------------------------------
説明
-----------------------------------------------------------------------------------*/
#descriptionSDGs .background{
	padding:83px 0;
	background-color:#e6e6e6;
}
#descriptionSDGs .wrapper{
	box-sizing:border-box;
	padding:32px 64px;
	width:1280px;
	background-color:#fff;
}
#descriptionSDGs h2{
	position:relative;
	border-left:9px solid #2ea7e0;
	font-size:1.4rem;
}
#descriptionSDGs h2::after{
	content:'';
	position:absolute;
	top:50%;
	right:0;
	margin-top:-2.3px;
	height:2.3px;
	width:100%;
	background-color:#2ea7e0;
}
#descriptionSDGs h2 .decoration{
	position:relative;
	z-index:1;
	padding:0 16px;
	background-color:#fff;
}
.SDGs-box{
	max-width:1002px;
	margin-right:-19px;
	margin-bottom:97px;
}
.SDGs-box .col-4{
	flex: 0 0 20%;
	max-width: 20%;
	line-height:0;
}
.SDGs-box img{
	width:calc(100% - 19px);
	height:auto;
	margin-bottom:19px;
}
.description-box{
	position:relative;
	margin-bottom:82px;
}
.description-box figure{
	float:left;
	width:47.66%;
}
.description-box figure img{
	width:100%;
}
.description-box .text{
	float:right;
	width:47.05%;
}
.description-box .text h3{
	padding:8px;
	background-color:#efefef;
	border-left:9px solid #2ea7e0;
	font-size:1.4rem;
}
.description-box .text p{
	font-size:1rem;
	margin-bottom:0;
}
.description-box dl{
	margin:0;
	font-weight:bold;
	line-height:1.8;
}
.description-box dl.position-config{
	/*position:absolute;*/
	bottom:0;
}
.description-box dl dt{
	display:inline-block;
	vertical-align:top;
}
.description-box dl dd{
	display:inline-block;
	margin:0;
}
.btn-bttp{
	margin-top:128px;
	margin-bottom:148px;
}
.btn-bttp a{
	display:block;
	text-align:center;
	border:1px solid #2ea7e0;
	color:#2ea7e0;
	line-height:80px;
}
#descriptionSDGs .wrapper.symbiosis{
	background-color:#fdeccc;
	margin-top:-32px;
}
.symbiosis-badge{
	height:45px;
	margin-top:58px;
	margin-bottom:90px;
}
.symbiosis-badge span{
	padding:4px 16px 1px;
	background-color:#fff;
	border:2.3px solid #f5a200;
	color:#f5a200;
	font-size:1.4rem;
}
@media screen and (max-width: 1280px){
#descriptionSDGs .wrapper{
	width:100%;
}
.description-box dl.position-config{
	position:relative;
}
}
@media screen and (max-width: 960px){
.SDGs-box .col-4{
	flex: 0 0 25%;
	max-width: 25%;
}
}
@media screen and (max-width: 680px){
.SDGs-box{
	margin-right:-10px;
	margin-bottom: 41px;
}
.SDGs-box .col-4{
	flex: 0 0 33.3334%;
	max-width: 33.3334%;
}
.SDGs-box img{
	width:calc(100% - 10px);
	margin-bottom:10px;
}
.description-box figure,
.description-box .text{
	float:none;
	width:100%;
}
#descriptionSDGs .wrapper{
	padding:16px 32px;
}
#descriptionSDGs h2{
	border-left:6px solid #2ea7e0;
}
#descriptionSDGs h2 .decoration{
	padding: 0 8px;
}
.description-box{
	margin-bottom:40px;
}
.description-box figure{
	margin-bottom:0.5em;
}
.description-box .text h3{
	margin-bottom:0.5em;
	border-left:6px solid #2ea7e0;
}
.btn-bttp {
	margin-top:68px;
	margin-bottom:78px;
}
.btn-bttp a{
	line-height:40px;
}
#descriptionSDGs .wrapper.symbiosis{
	margin-top:-16px;
}
.symbiosis-badge{
	height:32px;
	margin-top:29px;
	margin-bottom:40px;
}
.symbiosis-badge span {
	padding: 4px 8px 2px;
}
}
@media screen and (max-width: 480px){
#descriptionSDGs h2::after{
	content:none;
}
}
@media screen and (max-width: 380px){
#descriptionSDGs .wrapper{
	padding:16px;
}
}