@charset "utf-8";
/* CSS Document */
	
	
/*インフォバー*/	
	
	.sdgs-info{
		background-color: #1A3668;
		height: 60px;
		font-size: 40px;
		font-weight: bold;
		 display: table;
  width: 100%;
	}
		.sdgs-info a{
			color: #fff;
			display: table-cell;
  vertical-align: middle;
			text-align: center;
	}
	
		/*共通*/
		.sdgs-bg{
			background:#ddd url('/add/sdgs2022/img/sdgs2022-bg.png') repeat center center;
background-size:100% auto;
				font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-height: 1.8;
	color: #333333;
	font-size: 18px;
	margin: 0 auto;
						
}

		/* Structure */
.sdgs-body {
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-height: 1.8;
	color: #333333;
	font-size: 18px;
	margin: 0 auto;
  max-width: 960px;
  position: relative;
	padding-bottom: 1rem;
	
}
.sdgs-box-update {
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	line-height: 1.8;
	color: #333333;
	font-size: 30px;
	margin: 0 auto;
  position: relative;
	padding-bottom: 1rem;
	
}
	

		h1{
			text-align: center;
			font-size: 24px;
			padding-top: 2rem;
		}
	h2{
		text-align: center;
		font-size: 32px;
	}
		
	/*画像大きさ*/
		.sdgs-img{
			margin: 0 auto;
			max-width: 1200px;
			position: relative;
			padding-left: 4%;
			padding-right: 4%;
			padding-bottom: 100px;	
		}
	
			.sdgs-img3{
			margin: 0 auto;
			max-width: 440px;
			position: relative;
				margin-bottom: 0.5rem;
		}

	.sdgs-good{
		max-width: 300px;
		position: relative;
		margin: 0 auto;
	}
	
	/*セクション区切りスペース*/
	.sdgs-section{
					padding-top: 1rem;
			padding-bottom: 1rem;

	}
	
	.sdgs-section3{
			padding-bottom: 1rem;

	}
	.sdgs-section4{
			margin: 0 auto;
		max-width: 1140px;
  position: relative;
			padding-bottom: 2rem;
		padding-top: 3rem;

	}
	
	/*セクション背景*/
	.sdgs-section-bg{
		background-color: #ffffff;
		padding: 1rem;
	}

/*コンテンツ幅*/	
	.sdgs-width{
	margin: 0 auto;
  max-width: 780px;
  position: relative;
	}
	
/*マウスオーバーで画像を白くする*/
a:hover img.hoverwhite{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: “alpha( opacity=50 )”;
}
	
	
/*左詰めセンタリング*/
	.sdgs-center{
		text-align: center;
		margin: 0 auto;
	}
	.sdgs-center p{
		display: inline-block;
  text-align: left;
	}

	
	/*PCで無効*/
.pc_hid{
    display: none;
}

	
/*フレックスボックスYouTube*/
	.container { 
		display: flex;
		justify-content: space-around;
		 flex-wrap: wrap;
		gap:30px 0px;

	}	
	
	
	
/*You Tube*/
.youtube {
	width: 30%; /* 横幅変更 */
	box-sizing: border-box;
	margin: 0 auto;
}

.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	

/*動画キャプション*/
	.cap{
		text-align: center;
	}
	
	
/*フレックスボックス　ボタン*/
	
	.container-button { 
max-width: 1200px;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
margin-top: 0.5rem;
		margin-bottom: 1rem;
	}
	
.item-button {
 width: 500px;
margin: 8px;	
}
	
	
	
/*枠*/	
.box-movie {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-update {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;

    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
	
.box-action {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
	
.box-movie .box-movie-title{
    position: absolute;
    display: inline-block;
    top: -54px;
    right: 10px;

    padding: 0 10px;
    line-height: 1;
	max-width: 300px;
}
.box-action .box-action-title{
    position: absolute;
    display: inline-block;
    top: -56px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 300px;
}
	
.box-update .box-update-title{
    position: absolute;
    display: inline-block;
    top: -56px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 300px;
}
	
.box-movie .box-update .box-action p {
    margin: 0; 
    padding: 0;
}	
	
	.flame-border{
			margin: 2em;
	}
	
/*枠スペース*/
	.box-space{
		padding-bottom: 200px;
	}
	.box-space-last{
		padding-bottom: 0;
	}
	
	
	

/*テーブルスクロール*/
.table-wrap {
		  overflow-x: scroll;
	overflow-y:scroll;

  width: 100%;
  height: 300px;

}
.table {
  border-collapse: collapse;
  white-space: nowrap;
margin-left: auto;
    margin-right: auto;}
.table th,
.table td {
  padding: 4px 8px;
}	

	
/*ヨンチャンイラスト記事内位置*/
	.yon-action{
    position: absolute;
    display: inline-block;
    top: -220px;
    left: -80px;
    padding: 0 10px;
    line-height: 1;
	max-width: 200px;
	}
	.yon-up_date{
		    position: absolute;
    display: inline-block;
    top: 160px;
    right: -80px;
    padding: 0 10px;
    line-height: 1;
	max-width: 200px;
	}
	
	.yon-pickup{
    position: absolute;
    display: inline-block;
    top: -220px;
    right: -80px;
    padding: 0 10px;
    line-height: 1;
	max-width: 200px;
	}

/*ヨンチャンイラスト上部・下部*/
	.yon17{
		margin: 0 auto;
		width: 100%;
	}
	
/*画像リンク*/
	.img-link{
		width: 500px;
	}
	
	
/*---------------------タブレットで有効*/
	@media screen and (max-width:959px) {
		
/*ヨンチャンイラスト記事内位置*/	
		
	.sdgs-info{
		background-color: #1A3668;
		height: 60px;
		font-size: 16px;
		font-weight: bold;
	}

	
    .pc_hid{
        display: block;
    }
	
	
		.sdgs-section{
					padding-top: 1rem;
			padding-bottom: 1rem;

	}
.sp_hid{
    display: none;
}

	.sp-center{
		text-align: center;
	}

	/*You Tube*/
	.youtube {
	width: 80%; /* 横幅変更 */
	box-sizing: border-box;
	margin: 0 auto;
}

.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	

	/*スマホYouTube詳細情報用*/
	.mini iframe{
		max-width: 100%;
		margin: 0 auto;
		display:block;

	}
		
		.you-sp {
	width: 98%; /* 横幅変更 */
	box-sizing: border-box;
	margin: 1% auto;
}

.you-sp .inner-sp {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.you-sp .inner-sp iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	
	/*画像サイズ*/
			.sdgs-img{
			margin: 0 auto;
			max-width: 1200px;
			position: relative;
			padding-left: 4%;
			padding-right: 4%;
			padding-bottom: 100px;	
		}
	
		
			.sdgs-img3{
			margin: 0 auto;
			max-width: 240px;
			position: relative;
			margin-bottom: 0.5rem;

		}
	
		.sdgs-img4{
text-align: center;
			padding: 2%;
			position: relative;
		
	}

	
/*フレックスボックス　ボタン*/

	.container-button { 
		max-width: 1200px;

 display: flex;
 justify-content: center;
 flex-wrap: wrap;
margin-top: 0.5rem;
		margin-bottom: 1rem;
	}
	
	
.item-button {
 width: 300px;
margin: 4px;	
}

	h2{
		font-size: 18px;
	}
/*センタリングSP*/
	.sdgs-center-sp{
		text-align: center;
	}

	
/*枠*/	
.box-movie {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-update {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-action {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
	
.box-movie .box-movie-title{
    position: absolute;
    display: inline-block;
    top: -30px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 150px;
}
.box-update .box-update-title{
    position: absolute;
    display: inline-block;
    top: -30px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 150px;
}
.box-action .box-action-title{
    position: absolute;
    display: inline-block;
    top: -30px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 150px;
}
	
.box-movie .box-update .box-action p {
    margin: 0; 
    padding: 0;
}	
	
	.flame-border{
			margin: 2em;
	}	
		
		
/*ヨンチャンイラスト記事内位置*/	
.yon-action {
    position: absolute;
    display: inline-block;
    top: -140px;
    left: -50px;
    padding: 0 10px;
    line-height: 1;
    max-width: 120px;
}	
		
	.yon-up_date{
		    position: absolute;
    display: inline-block;
    top: 200px;
    right: -50px;
    padding: 0 10px;
    line-height: 1;
	max-width: 120px;

	}
		
	.yon-pickup{
    position: absolute;
    display: inline-block;
    top: -140px;
    right: -50px;
    padding: 0 10px;
    line-height: 1;
    max-width: 120px;
	}
		
/*枠スペース*/
	.box-space{
		padding-bottom: 50px;
	}
		
		
	}
	
	

/*---------------------スマートフォンで有効*/
@media screen and (max-width:599px) {

	/*画像大きさ*/
		.sdgs-img{
			margin: 0 auto;
			max-width: 1200px;
			position: relative;
			padding-left: 4%;
			padding-right: 4%;
			padding-bottom: 50px;	
		}
	
	.sdgs-info{
		background-color: #1A3668;
		height: 60px;
		font-size: 16px;
		font-weight: bold;
	}

	
    .pc_hid{
        display: block;
    }
	
	
		.sdgs-section{
					padding-top: 1rem;
			padding-bottom: 1rem;

	}
.sp_hid{
    display: none;
}

	.sp-center{
		text-align: center;
	}

	/*You Tube*/
	.youtube {
	width: 80%; /* 横幅変更 */
	box-sizing: border-box;
	margin: 0 auto;
}

.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	

	/*スマホYouTube詳細情報用*/
	.mini iframe{
		max-width: 100%;
		margin: 0 auto;
		display:block;

	}
		
		.you-sp {
	width: 98%; /* 横幅変更 */
	box-sizing: border-box;
	margin: 1% auto;
}

.you-sp .inner-sp {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.you-sp .inner-sp iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}	
	/*画像サイズ*/
			.sdgs-img3{
			margin: 0 auto;
			max-width: 240px;
			position: relative;
			margin-bottom: 0.5rem;

		}
	
		.sdgs-img4{
text-align: center;
			padding: 2%;
			position: relative;
		
	}

	
/*フレックスボックス　ボタン*/

	.container-button { 
		max-width: 1200px;

 display: flex;
 justify-content: center;
 flex-wrap: wrap;
margin-top: 0.5rem;
		margin-bottom: 1rem;
	}
	
	
.item-button {
 width: 300px;
margin: 4px;	
}

	h2{
		font-size: 18px;
	}
/*センタリングSP*/
	.sdgs-center-sp{
		text-align: center;
	}

	
/*枠*/	
.box-movie {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-update {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-action {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
	
.box-movie .box-movie-title{
    position: absolute;
    display: inline-block;
    top: -30px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 150px;
}
.box-update .box-update-title{
    position: absolute;
    display: inline-block;
    top: -30px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 150px;
}
.box-action .box-action-title{
    position: absolute;
    display: inline-block;
    top: -30px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 150px;
}
	
.box-movie .box-update .box-action p {
    margin: 0; 
    padding: 0;
}	
	
	.flame-border{
			margin: 2em;
	}	
/*ヨンチャンイラスト記事内位置*/	
.yon-action {

    position: absolute;
    display: inline-block;
    top: -110px;
    left: -40px;
    padding: 0 10px;
    line-height: 1;
    max-width: 100px;
}
	.yon-up_date{
		    position: absolute;
    display: inline-block;
    top: 260px;
    right: -50px;
    padding: 0 10px;
    line-height: 1;
	max-width: 120px;

	}
	.yon-pickup{
    position: absolute;
    display: inline-block;
    top: -110px;
    right: -40px;
    padding: 0 10px;
    line-height: 1;
    max-width: 100px;
	}
	
	
}
	
/*------------小さいスマートフォンで有効*/
@media screen and (max-width:390px) {
	
	/*画像大きさ*/
		.sdgs-img{
			margin: 0 auto;
			max-width: 1200px;
			position: relative;
			padding-left: 4%;
			padding-right: 4%;
			padding-bottom: 50px;	
		}

/*フレックスボックス　ボタン*/

	.container-button { 
		max-width: 1200px;

 display: flex;
 justify-content: center;
 flex-wrap: wrap;
margin-top: 0.5rem;
		margin-bottom: 1rem;
	}
	
	
.item-button {
 width: 300px;
margin: 4px;	
}
	
	
	
	
/*枠*/	
.box-movie {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-update {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
.box-action {
    position: relative;
    padding: 1em 1.5em;
    margin: 2em 0;
    border: solid 6px #004c88;/*線*/
    border-radius: 8px;/*角の丸み*/
    color: #333333;/*文字色*/
	max-width: 1200px;
	margin: 0 auto;
	background-color: #FFFFFF;/*背景色*/
}
	
.box-movie .box-movie-title{
    position: absolute;
    display: inline-block;
    top: -24px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 100px;
}
.box-update .box-update-title{
    position: absolute;
    display: inline-block;
    top: -24px;
    left: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 100px;
}
.box-action .box-action-title{
    position: absolute;
    display: inline-block;
    top: -24px;
    right: 10px;
    padding: 0 10px;
    line-height: 1;
	max-width: 100px;
}
	
.box-movie .box-update .box-action p {
    margin: 0; 
    padding: 0;
}	
	
	.flame-border{
			margin: 2em;
	}	

/*ヨンチャンイラスト記事内位置*/
.yon-action {
    position: absolute;
    display: inline-block;
    top: -70px;
    left: -30px;
    padding: 0 10px;
    line-height: 1;
    max-width: 60px;
}
	.yon-up_date{
		    position: absolute;
    display: inline-block;
    top: 260px;
    right: -50px;
    padding: 0 10px;
    line-height: 1;
	max-width: 100px;

	}
	.yon-pickup{
    position: absolute;
    display: inline-block;
    top: -70px;
    left: -30px;
    padding: 0 10px;
    line-height: 1;
    max-width: 60px;
	}
		
	
	}