@charset "UTF-8";

/* 基本色 */
:root{
	-main-color: #178ae0;
	-accent-color: #c69c6d;
	-dark-color:  #0168b7;/* タイトルブルー */
	-text-color:  #3c3c3c;/* 文字をグレーに */
	-otured-color: #e50012;
}

/* 基本設定:　フォントサイズ */

@media (max-width: 599px) {
	:root {
		 font-size:14px;
	}
	
}
@media (min-width: 600px) and (max-width: 799px) {
	:root {
		 font-size:16px;
	}
}
@media (min-width: 800px)  {
	:root {
		 font-size:16px;
	}

}

/* 基本設定　ページ全体 */
body{
	margin: 0;
	font-family:"メイリオ","Hiragino Kaku Gothic Pro", sans-serif;
	background-color: #DBEAD7;
	color: #3c3c3c;
}
* { 
    margin: 0px; 
    padding: 0px; 
}

/* ヘッダー全体 */
header {
	position: sticky;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	top: 0;
	z-index: 1000;
	background-color:#fff;
}

/* ヘッダー内ロゴ-headA */	
.headA {
	display: inline-block;
	line-height: 78px;
}
.headA img{
	vertical-align: bottom;/* ロゴ画像の下に隙間ができないよう指定 */
}

/* ヘッダー グローバルナビ-headB */

.headB ul {
	margin: 0;
	padding:0;
	list-style: none;
	align-items: center; 
	
}

.headB .highlight {/* 現在のページ */
  	position: relative;
  	display: inline-block;
	padding: 12px 12px 12px 12px;/* メニューの中の余白 */
	background-color: #83b6bc;
	color: #fff;;
	font-size: 88%;
	font-weight: bold;
 	align-items: center; 
	border-radius: 5px;
}

.headB .shigen {/* 紙パックは大切な資源メニュー */
  	position: relative;
  	display: inline-block;
	padding: 12px 12px 12px 12px;/* メニューの中の余白 */
	background-color: #83b6bc;
	color: #fff;;
	font-size: 100%;
	font-weight: bold;
 	align-items: center; 
	border-radius: 5px;
}

.headB .shigen ruby {
	font-weight: normal;
}
.headB a {
  	position: relative;
  	display: inline-block;
	padding: 12px 10px 12px 10px;/* 各メニューの中の余白 */
	color: inherit;
	font-size: 88%;
	text-decoration: none;
}

.headB li.center {
	text-align: center;
}

.headB a::after {
  position: absolute;
  bottom: 20px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #7bc9ca;
  opacity: 0;
  transition: .3s;
}

.headB a:hover::after {
  bottom: 8px;
  opacity: 1;
}

/* グローバルメニュー子階層 */

.headB ul li .nav_child {
	/* 子メニューもろもろ*/
	z-index: 100;/* 子メニューが上にくるように100としている */
	display: flex;
	flex-direction:column;/* 子メニューが縦にならぶ */
	line-height: 1.5;
	text-align: center;
}
	
.nav_child {
    visibility: hidden; /*最初は非表示*/
    width: 100%;
    position: absolute;
    left: 0;
    top: 95%;
    background: #fff;
    -webkit-box-shadow: 0px 3px 10px 2px rgba(25, 26, 26, 0.3);
    box-shadow: 0px 3px 5px 2px rgba(25, 26, 26, 0.3);
    border-radius: 5px;
    transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1); /*アニメーションの時間とイージング設定*/
    transform: scaleY(0); /*ドロップダウンアニメーションのために高さを０に*/
    transform-origin: center top; /*transformの基準点を設定　上部中央*/
    opacity: 0; /*フェ-ドインのアニメーションのため透明度０に*/
}

/*子階層ドロップダウン*/
.headB > ul > li:hover .nav_child { /*親メニューの<li>にマウスオンしたとき*/
    visibility: visible; /*表示する*/
    opacity: 1; /*フェイドイン 透明度を１に*/
    transform: scaleY(1); /*ドロップダウン 高さを１に*/
}

/*子階層のふきだしの装飾*/
.nav_child::before {
    content: "";
    display: block;
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
    filter: drop-shadow(0 0px 5px rgba(25, 26, 26, 0.3));
    z-index: -1;/*吹き出しの三角が下に*/
}
.nav_child li {
    background: #fff;
}

/*子階層のふきだし背景の角丸設定*/
.nav_child > li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.nav_child > li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.nav_child a {
    padding: 10px 5px; 
}


@media (min-width: 768px) {
	/* 大きい画面の設定*/
header .container {
		display:flex;
		align-items: center;
		justify-content: space-between;
		border-sizing:border-box;
		max-width: 1280PX;
		margin-left:auto;
		margin-right: auto;
		padding-left: 10px;
		padding-right: 10px;
	}
	
.headB ul {
    display: flex;
	}
.headB ul li {
    position: relative;
	}	 
}

/* ヘッダーc トグルボタン*/

@media (max-width: 767px) {
/* スマホ小さい画面の設定*/	
header .container-small {
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	
 .container-small img { /* スマホではロゴを小さく */
	width: 80%;
	}
	
.headC {
	margin-right: 20px;
	padding: 0;
	border:none;
	outline:none;
	background:none;
	font-size: 32px;
	opacity:0.5;
	cursor: pointer;
	}

.headC:hover {
	opacity: 0.3;
	}

.headB {
	display:none;
	}
	/* 親要素の下にくるために */
.headB > ul > li .nav_child { /*親メニューの<li>にマウスオンしたとき*/
    visibility: visible; /*表示する*/
    opacity: 1; /*フェイドイン 透明度を１に*/
    transform: scaleY(1); /*ドロップダウン 高さを１に*/
	}

.headB .nav_child{
	width: 50%;
	position: static;
	top: 100%; /* 親要素のすぐ下に表示 */
	text-align: left;
	}
}

@media (min-width: 768px) {
	/* 大きい画面の設定非表示*/
	.headC {
		display: none;
	}
	.headB {
	display: block !important;
	}
}


/* ここから各コンテンツ */
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* コンテンツA~G の最大幅を指定 */
.conA,
.conB,
.conC,
.conD,
.conE,
.conF,
.conG {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	background-color: #fff;
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* コンテンツA ヒーローイメージ */

.conA img {
    max-width: 100%; /* 親要素の幅を超えないように最大幅を設定 */
    height: auto;    /* 縦横比を維持したまま高さを自動調整 */
    display: block;  /* 画像をブロック要素にして余白をなくす */
    width: 100%;     /* 親要素の幅に合わせて常に100%の幅を確保 */
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */

/* コンテンツB リード文　容環協の紹介 */
.conB .container {
	text-align:center;
	background-color: #fff;
	max-width: 1280px;
	margin-left:auto;
	margin-right:auto;
}
.conB p {
	max-width: 800px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 0;
	padding-top: 30px;
	padding-bottom: 10px;
	line-height: 1.8;
	text-align:justify;
}


@media (max-width: 767px) {/* リード文のスマホ設定 */
.conB .container p {/* 左右のアキ */
	margin-left:20px;
	margin-right:20px;
	}
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* コンテンツcon_C :コンテンツ見出しとアイコン指定 */

.conC .subtitle {
	text-align: center;
	}

.conC .subtitle h1 {
	max-width: 1000px;
	margin-left:auto;
	margin-right:auto;
	padding-top: 0;
	padding-bottom: 10px;
	font-family:  "M PLUS Rounded 1c", sans-serif;
	font-size: 250%;
	font-weight: 500;
	color: #0168b7;
	letter-spacing: 0.03em;
}
.conC .subtitle img {
		width: 100px;
		vertical-align: bottom;/* ロゴ画像の下に隙間ができないよう指定 */
	}

@media (min-width: 768px) {
	.conC .subtitle h1 br {/* 学ぶタイトル部分は大きい画面では改行なし */
		display:none;
	}
}
@media (max-width: 767px) {
	.conC .subtitle img {/* スマホはアイコンを小さく */
		width: 70px;
	}
	.conC .subtitle h1 {/* スマホ見出し文字小さくする */
		font-size: 200%;
		line-height: 1.2;
		letter-spacing: 0em;/*小見出しはベタに*/
		padding-top: 10px;
  		padding-bottom: 10px;
	}

}	

/* コンテンツcon_C :学ぶとチャレンジのメニューボタンのbox-------------------------------------- */

.conC .container {
	max-width: 800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0;
}
.conC .container .box{
	margin-left:10px;
	margin-right:10px;
	padding-left:5px;
	padding-right:5px;
	text-align:center;
}
.container .box img {
	max-width: 70%;
	height: auto;
}
.container .box p.comment{ 
	margin-top: 10px;
	margin-bottom:10px;
	text-align:center;
	font-size:90%;
	font-weight: inherit;
	line-height: 1.6;
	color: cadetblue;
}
/* コンテンツcon_C :チャレンジしようのメニューbox-------------------------------------- */

.challenge {
	max-width: 800px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0;
	padding-bottom: 10px;
}

.challenge .box {
	text-align:center;
	padding-left:30px;
	padding-right:30px;
}
.challenge .box img {
	max-width: 70%;
	height: auto;
}

.challenge .box p.comment{ 
	margin-top: 10px;
	margin-bottom:10px;
	font-size:90%;
	line-height: 1.6;
	color: cadetblue;
}

/* コンテンツcon_C :レスポンシブ指定-------------------------------------- */


@media (min-width: 768px){/* タブレット以上は横並びに*/
	.conC .container, .challenge {
		display: flex;
		max-width: 800px;
		margin-right:auto;
		margin-left:auto;
	}
	.conC .box {
		flex: 1;
	}
}
@media (max-width: 767px) {/*スマホのボタンレイアウト*/

	.conC .container {/* スマホの時のボタンのアキなど指定*/
		padding-right: 20px;
		padding-left: 20px;
		padding-bottom: 10px;
}

	.conC img {
		width: 70%;
}
	
	.conC .box p.comment{ 
		margin-top: 10px;
		margin-bottom:10px;
		font-size: 110%;
		line-height: 1.6;
		color: cadetblue;
}
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* コンテンツE お知らせ */

.conD .subhead {
	background-color: #fff;
	max-width: 1280px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:0;
}

.conD h1 {
	width: 800px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top: 0;
	padding-bottom: 10px; 
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-size:180%;
	color: chocolate;
	letter-spacing: 0.1em;
	letter-spacing: 0.4em;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: cadetblue;
}
.news {
	width: 800px;
	margin-left:auto;
	margin-right:auto;
	padding-bottom: 20px;
}
.news a {
	color: darkcyan;
	text-decoration: none;
	font-size:80%;
	margin-top: 5px;
}
	
.news table{
	border-collapse:collapse;
	color: #3c3c3c;
}
.news th,td {
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-align:left;
	line-height: 1.8;
	border-bottom: solid 1px cadetblue;
}
.news th {
	padding-right: 1rem;
	word-break:keep-all;
	vertical-align:text-top;
}

.news td span.underline{/*アンダーライン使う時に指定*/
	border-bottom: 1px solid #e50012;
	padding-bottom: 2px;
}
.news td span.red{/*赤字を使うときに*/
	color: crimson;
}


@media (max-width: 768px) {
  .last td:last-child {
    width: 100%;
  }
  .conD h1{/*スマホでは左右にアキ*/
    width: 90%;
	font-size: 140%;
  }
  .news {/*スマホでは左右にアキ*/
    width: 90%;
  }
  .news th {/*日にちの下のpスペースを削除*/
	  border-bottom:none;
	  padding-bottom: 0;
  }
  .news th,
  .news td {
    display: block;
    width: 100%;
  }
}
/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* コンテンツF SDGs */

.conF img{/* 画面に対して左右100％でマックスは900 */
	width: 50%;
	max-width: 500px;
	text-align:center;
	padding-top: 10px;
	margin-left:auto;
	margin-right:auto;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
@media (max-width: 900px) {
.conF .container {
	padding-left:20px;
	padding-right: 20px;
	}
}
@media (max-width: 767px) {
.conF  .container{/* スマホの時に左右に10pxのアキを入れる */
    padding-top: 0px;
	padding-left:10px;
	padding-right: 10px;
}
/* スマートフォン幅767以下で見たときは"sp"のclassがついた画像が表示される */
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* コンテンツB 容環協の紹介------------------------- */
.conG .container {
	text-align:center;
	background-color: #fff;
	max-width: 1280px;
	margin-left:auto;
	margin-right:auto;
	display: block;
}
.conG p {
	max-width: 600px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 0;
	padding-bottom: 30px;
	line-height: 2;
	text-align:justify;
	font-size: 0.9em;
}
.conG p.largebold {
	max-width: 600px;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #0168b7;
	padding-top: 20px;
	padding-bottom: 5px;
	
}


@media (max-width: 768px) {

.conG .container p {
	margin-left:20px;
	margin-right:30px;
	text-align:left;
}

.conG p.largebold {
	text-align: left;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #0168b7;
	padding-top: 20px;
	padding-bottom: 5px;
	
}
}




/* フッターここから */
footer {
	color: #fff;
	background-color: #178ae0;
	background-color: var(-main-color);
	max-width: 1280px;
	margin-left:auto;
	margin-right:auto;
}

footer .container {
	padding: 20px 30px 5px 30px ;
}

@media (min-width: 600px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}
	.footA {
		flex: 0 0 40%;
	}
	.footB {
		flex: 0 0 60%;
	}
	.footC {
		flex: 0 0 100%;
	}	
}


/* フッターA： サイト情報 */
.footA {/* 容環協情報 */
	margin-bottom: 20px
}
.footA h2 {
	margin-top: 0;
	margin-left: 20px;
	margin-bottom: 5px;
	font-size: 120%;
	letter-spacing: 0.2em;
}

.footA p {
	margin-top: 0;
	margin-left:20px;
	margin-bottom:20px;
	font-size: 70%;
}

.footA a {
	color: inherit;
	text-decoration: none;
}

/* フッターB： メニュー一覧*/
.footB div{
	margin-bottom: 0px;
}
.footB h3 {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 90%;
	font-weight:lighter;
}
.footB h3 a{
	font-size: inherit;
	font-weight:inherit;
}
.footB h3 span{
	font-size: smaller;
}
.footB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.footB a {
	display: block;
	padding: 1px;
	color: inherit;
	font-size: 80%;
	text-decoration: none;
}

.footB a:hover {
	background-color: rgba(0,0,0,0.3);
}

@media (min-width: 769px) {
	.footB {
		display: flex;
	}
	
	.footB div {
		flex: 1;
	}
	
	.footB div:not(:first-child){
		margin-left: 40px;
		margin-right: 20px;
	}
	
}
@media  (max-width: 768px) {
	.footB {
		margin-left: 20px;
	}
}

/* フッター コピーライト*/
.footC {
	font-size: 80%;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	margin-top:20px;
	margin-bottom: 20px;
}