/*
	酒田YEG　SDGs宣言
	トップページスタイルシート
*/


/*=============================================================
//	ページ全体の設定
=============================================================*/
html{
	scroll-behavior: smooth;
}

body{
	margin: 0px;
}

/*-------------------------------------------------------------
	リンク
-------------------------------------------------------------*/
/*	通常時	*/
a:link{
	text-decoration: none;
	color:	inherit;
}
/*	訪問済み	*/
a:visited{
	text-decoration: none;
	color:	inherit;
}
/*	カーソルが乗っている	*/
a:hover{
	text-decoration: none;
	color:	inherit;
}
/*	クリック中	*/
a:active{
	text-decoration: none;
	color:	inherit;
}

/*-------------------------------------------------------------
	クリック出来る要素
-------------------------------------------------------------*/
.clickable_element{
}

.clickable_element:hover{
	cursor:	pointer;
}


/*-------------------------------------------------------------
	段落、リスト
-------------------------------------------------------------*/
p, a, li, th, td{
	font-family: "Meiryo", sans-serif;
	margin:	0px;
}

/*-------------------------------------------------------------
	メディア（img, video）の枠
-------------------------------------------------------------*/
.media_frame{
}

.media_frame img, .media_frame video, .media_frame ifarme{
	width:	100%;
	height:	100%;
	object-fit:	contain;
}

/*-------------------------------------------------------------
	@mediaでの制御
-------------------------------------------------------------*/
/* 画面の幅768ピクセル以上 */
@media screen and ( min-width: 769px )
{
	.disp_vertical_only { display: none!important; }
}

/* 画面の幅768ピクセル未満 */
@media screen and ( max-width: 768px )
{
	.disp_horizontal_only { display: none!important; }
}


/*=============================================================
//	ページトップ
=============================================================*/
#contents_body{
	width: 90%;
	margin: 0px auto;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 769px )
{
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#contents_body{
		width: 96%;
		margin: 0px auto;
	}
}


/*=============================================================
//	ヘッダー
=============================================================*/
#header_container{
	width: 100%;
}

#header_top_frame{
	padding: 8px 0px;
	background-color: #000080;
}

#header_top{
	display: flex;
	justify-content: space-between;
	width: 96%;
	margin: 0px auto;
}

#header_logo{
	display: flex;
	align-items: flex-start;
	
}

.header_logo_icon{
	height: 48px;
}

#header_top p{
	font-size: x-large;
	color: #ffffff;
}

#header_image{
	width: 100%;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#header_top p{
		font-size: small;
	}
	.header_logo_icon{
		height: 40px;
	}
}


/*=============================================================
//	導入部
=============================================================*/

#intro_container{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 64px;
}

#intro_logo{
	width: 160px;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル以上
-------------------------------------------------------------*/
@media screen and ( min-width: 769px )
{
#intro_title{
	font-size: 250%;
	color: #4D4D4F;
	border-bottom: thin solid #000000;
}
	
#intro_title_mob{
		display: none;
	}
}

#intro_container p{
	font-family: 'Noto Serif JP', serif;
}

#intro_message{
	font-size: x-large;
	text-align: center;
	color: #808080;
}



/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#contents_body{
		width: 90%;
		margin: 0px auto;
			}
	#intro_title{
		display: none;
		font-size: 1.5em;
	}
	
	#intro_title_mob{
		font-size: 2em;
		text-align: center;
		border-bottom: thin solid #000000;
	}
	#intro_message{
		font-size: 16px;
		text-align: center;
		
	}
}


/*=============================================================
//	メッセージ
=============================================================*/
#message_container{
	margin-bottom: 32px;
}

#message_items{
	display: flex;
	justify-content: space-between;
}

.message_item{
	width: 49%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.message_item > p{
	margin-bottom: 8px;
}

#message_name{
	display: flex;
	flex-direction: column;
	align-items: end;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#message_items{
		flex-direction: column;
	}
	.message_item{
		width: 100%;
	}
	#message_container p{
		font-size: x-small;
	}
}

/*=============================================================
//	SDGsの説明
=============================================================*/
#explanation_container{
	width: 100%;
	margin-bottom: 64px;
}

#explanation_title{
	width: 100%;
	color: #484849;
	border-bottom: thin solid #000000;
	margin-bottom: 16px;
}

#explanation_title > p{
	font-family: 'Noto Serif JP', serif;
	font-size: xx-large;
}

#explanation_detail{
}

#explanation_images{
	width: 64%;
	margin: 0px auto;
	margin-top: 24px;
}

.explanation_image{
	width: 100%;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#explanation_title > p{
		font-size: 1.5em;
	}
	#explanation_detail > p{
		font-size: x-small;
	}
}


/*=============================================================
//	コンテンツ
=============================================================*/
#contents_title_image{
	width: 80%;
	margin: 0px auto;
}

.contents_item_container{
	width: 100%;
	margin-bottom: 32px;
}

.contents_item_caption{
	width: 30%;
	height: 30%;
}

.contents_item_body{
	display: flex;
	justify-content: space-between;
}

.contents_item_left{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 64%
}

.contents_item_detail{
}

.contents_item_icons{
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.contents_item_icon{
	width: 18%;
}

.contents_item_right{
	width: 32%;
	display: flex;
	align-items: flex-end;
}

.contents_item_image{
	width: 100%;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#contents_title_image{
		width: 100%;
		margin: 0px auto;
		margin-bottom: 16px;
	}

	.contents_item_caption{
		width: 224px;
	}

	.contents_item_body{
		flex-direction: column;
	}

	.contents_item_left, .contents_item_right{
		width: 100%;
	}

	.contents_item_detail > p{
		font-size: x-small;
	}
}


/*=============================================================
//	フッター
=============================================================*/
#footer_container{
	display: flex;
	align-items: flex-end;
	height: 96px;
	width: 100%;
	background-image: url("image/footer_wave.png");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto 100%;
}

#footer_copyright{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 32px;
	background-color: #ABD4FD;
}

#footer_copyright > p{
	color: #ffffff;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#footer_copyright > p{
		font-size: x-small;
	}

	#footer_container{
		height: 64px;
	}

	#footer_copyright{
		height: 24px;
	}
}


/*=============================================================
//	ページトップへ
=============================================================*/
#to_top{
	position: fixed;
	right: 24px;
	bottom: 48px;
	width: 64px;
	height: 64px;
}

/*-------------------------------------------------------------
	画面の幅768ピクセル未満
-------------------------------------------------------------*/
@media screen and ( max-width: 768px )
{
	#to_top{
		width: 48px;
		height: 48px;
	}
}