@charset "utf-8";

html {
	scroll-behavior: smooth;
}

body {
	font-family: "メイリオ";
	margin: 0;
	padding: 0;
	background: #FFF;
}

/* ~~ エレメント / タグセレクター ~~ */
ul,
ol,
dl {
	padding: 0;
	margin: 0;
}

li {
	font-family: "メイリオ";
	font-size: 13px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


li a {
	font-size: 13px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	list-style: none;
	text-decoration: none;
}

li a:hover {
	/** 半透明（全体） ******************************/
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	/*********************
『filter:alpha(opacity=50);』--【IE】/ 透過無しの状態"100%"を指定する際は「filter:alpha(opacity=100);」。
『-moz-opacity: 0.5;』--【Firefox（Mozilla）】/ 透過無しの状態"100%"を指定する際は「-moz-opacity:1;」。
『opacity: 0.5;』--【SafariやOpera】/ 透過無しの状態"100%"を指定する際は「opacity:1;」。
**********************/
}


h4,
h5,
h6,
p {
	font-family: "メイリオ";
	margin-top: 0;
	/* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px;
	/* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}


p {
	font-family: "メイリオ";
	font-size: 13px;
	margin: 0;
	padding: 0;
	text-align: justify;
	text-justify: inter-ideograph;
}


p a {
	/* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	font-family: "メイリオ";
	font-size: 13px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}


a img {
	/* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}

/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #414958;
	text-decoration: underline;
	/* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}

a:visited {
	color: #4E5869;
	text-decoration: underline;
}

a:hover,
a:active,
a:focus {
	/* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}

/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */






/**　link show　***********************************************************************************/


/** block *****************************************/
.pc-show-block {
	display: block;
}

.pc-hide-block {
	display: none;
}

@media screen and (max-width: 480px) {
	.pc-show-block {
		display: none;
	}

	.pc-hide-block {
		display: block;
	}
}


/** inline-block *****************************************/
.pc-show-inline {
	display: inline-block;
}

.pc-hide-inline {
	display: none;
}

@media screen and (max-width: 480px) {
	.pc-show-inline {
		display: none;
	}

	.pc-hide-inline {
		display: inline-block;
	}
}


/** none *****************************************/
.pc-show {}

.pc-hide {
	display: none;
}

@media screen and (max-width: 480px) {
	.pc-show {
		display: none;
	}

	.pc-hide {
		display: inline;
	}
}






/**　header_pc　***********************************************************************************/
/*************************************************************************************/
@media screen and (max-width: 480px) {

	/*ウィンドウ幅が最大480pxの場合にPC非表示*/
	.header_pc {
		display: none;
	}
}

@media screen and (min-width: 481px) {

	/*ウィンドウ幅が最少481pxの場合にPC表示*/
	.header_pc {
		width: 1080px;
		height: auto;
		margin: 0 auto;
		padding: 10px 0 10px 0;
		background: #FFF;
	}
}

/*************************************************************************************/


/**　header_sp　***********************************************************************************/
/*************************************************************************************/
@media screen and (min-width: 481px) {

	/*ウィンドウ幅が最少481pxの場合にSP非表示*/
	.header_sp {
		display: none;
	}
}

@media screen and (max-width: 480px) {

	/*ウィンドウ幅が最大480pxの場合にSP表示*/
	.header_sp {
		width: 100%;
		position: fixed;
		margin: 0;
		padding: 0;
		z-index: 9999;
	}
}

/*************************************************************************************/




/*************************************************************************************/

@media screen and (min-width: 481px) {
	/*ウィンドウ幅が最少481pxの場合にPC表示*/

	.okc {
		display: none;
	}
}

@media screen and (max-width: 480px) {

	/*ウィンドウ幅が最少480pxの場合にPC非表示*/
	.okc {
		font-family: "メイリオ";
		display: block;
		font-size: 20px;
		font-weight: bold;
		color: #ffffff;
		padding: 16px 0 13px;
		margin: 0;
		text-align: center;
		background: #204DA0;
	}
}

/** top_template ***********************/

.header_pc p.h1 {
	display: block;
	float: left;
	width: 660px;
	font-family: "メイリオ";
	font-size: 15px;
	font-weight: bold;
	line-height: 18px;
	margin: 0;
	padding: 15px 0 0;
}

.header_pc p.mess {
	display: block;
	float: left;
	width: 660px;
	font-family: "メイリオ";
	font-size: 14px;
	line-height: 16px;
	margin: 0 0 22px;
	padding: 3px 0 0;
}




/** コンテント ここから　↓↓↓　*****************************************************************************************************/
#content {
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0 auto 30px;
	clear: both;
}


/***************************************************************************************************************************/
/** 【PC用】　↓↓↓　*****************************************************************************************************/
@media screen and (min-width: 481px) {
	/*ウィンドウ幅が最少481pxの場合にPC表示*/





	#content .topimg {
		width: 1080px;
		margin: 0 auto 20px;
		clear: both;
	}

	#content .topimg h1 {
		font-weight: bold;
		font-size: 30px;
		margin: 0 20px;
		padding: 28px 0 0;
		border-bottom: 2px solid #000;
	}

	#content .topimg h2 {
		font-size: 20px;
		line-height: 30px;
		margin: 1px 20px 0;
		padding: 0;
		text-align: right;
		border-top: 1px solid #000;
	}

	#content .topimg p {
		font-family: "メイリオ";
		font-size: 15px;
		line-height: 130%;
		padding: 30px 0 0;
		margin: 0 20px;
	}



	/******************************　first ↓↓↓　【PC】***************************************************************/
	#content .first {
		width: 1080px;
		margin: 0 auto;
		padding: 0;
		clear: both;
	}

	#content .first ul {
		margin: 0 0 0 40px;
		padding: 0;
	}


	#content .first li {
		float: left;
		margin: 0 0 20px 0;
		padding: 0 30px 0 0;
		font-size: 16px;
		font-weight: bold;
		color: #CCC;
	}

	#content .first li.last {
		float: left;
		margin: 0 0 20px 0;
		padding: 0 0 0 0;
		font-size: 16px;
		font-weight: bold;
		color: #CCC;
	}


	#content .first li a {
		font-size: 16px;
		font-weight: bold;
		color: #00F;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	#content .first li a:before {
		#content: "▶";
		font-size: 13px;
	}


	#content .first li a:hover {
		filter: alpha(opacity=25);
		-moz-opacity: 0.25;
		opacity: 0.25;
	}






	/******************************　headline-area ↓↓↓　【PC】***************************************************************/
	#content .headline-area {
		width: 70%;
		display: flex;
		width: 1080px;
		height: auto;
		margin: 20px auto 30px;
		clear: both;
	}




	/******************************　headline ↓↓↓　【PC】***************************************************************/
	#content .headline {
		float: left;
		width: 280px;
		height: auto;
		margin: 0 0 30px 0;
		box-shadow: 2px 2px 4px -2px #555555;
	}

	#content .sub-headline {
		float: left;
		width: 280px;
		height: auto;
		padding: 0;
		margin: 0;
		background: #FBF9F0;
	}


	#content .sub-headline p.title {
		font-size: 18px;
		font-weight: bold;
		color: #FFF;
		background: #8B7925;
		text-align: center;
		padding: 10px 0;
		margin: 0 0 20px 0;
	}


	#content .sub-headline li {
		padding: 0 5px 10px;
		margin: 0 10px 20px;
		border-bottom: 1px dotted #CCC;
	}


	#content .sub-headline li p {
		font-size: 13px;
		margin: 0 0 10px 0;
	}


	#content .sub-headline li p.top {
		font-size: 18px;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}

	/** ---------------  sub-headline　ここまで ↑↑↑　------------------------------ */


	/** ---------------  main2　ここから 　------------------------------ */
	#content .main2 {
		display: flex;
		width: 664px;
		height: auto;
		margin: 0px 0 30px 50px;
	}


	#content .main2 p.img {
		/* width: 225px; */
		height: auto;
		margin: 0px 0 30px 20px;
	}


	#content .main2 p.img span {
		display: block;
	}


	#content .main2 p.text01 {
		width: 385px;
		margin: 0 0 20px 20px;
	}


	#content .main2 p.text02 {
		width: 385px;
		margin: 0 0 5px 20px;
	}


	#content .main2 p.text03 {
		width: 365px;
		font-weight: bold;
		margin: 0 0 0 40px;
	}


	#content .main2 p.text04 {
		width: 375px;
		margin: 59px 0 0 20px;
	}

	/** ---------------  main2　ここまで ↑↑↑　------------------------------ */

	/** ---------------  main3　ここから ------------------------------ */
	#content .main3 {
		float: left;
		width: 664px;
		height: auto;
		margin: 0px 0 30px 50px;
	}


	#content .main3 p.title {
		font-size: 109%;
		font-weight: bold;
		padding: 0 0 0 15px;
		background: url(../../image/about/award/title-bar.jpg) no-repeat;
	}


	#content .main3 p.photo02 {
		float: left;
		margin: 20px 30px 0 0;
	}


	#content .main3 p.photo03 {
		float: left;
		margin: 20px 0 0 0;
	}


	#content .main3 p.photo04 {
		float: left;
		margin: 20px 30px 0 0;
	}


	#content .main3 p.photo05 {
		float: left;
		margin: 20px 0 0 0;
	}


	#content .main3 p.photo06 {
		float: left;
		margin: 20px 30px 0 0;
	}


	#content .main3 p.photo07 {
		float: left;
		margin: 20px 0 0 0;
	}





	/** ---------------  main3　ここまで ↑↑↑　------------------------------ */




	/******************************　main3 ↓↓↓　【PC】***************************************************************/
	/* #content .main3 {
    float: left;
	width: 770px;
	margin: 20px 0px 0 30px;
    padding: 0;
    border-top: 2px solid #ccc;
}
    
#content .main3 h2 {
    font-size: 22px;
    font-weight: bold;
    margin: 13px 0 10px 15px;
    padding: 20px 0 5px;
    border-bottom: 1px dotted #ccc;
}

#content .main3 h2 span {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 0 1em;
    padding: 0;
}

#content .main3 .image-container {
    display: flex;
    flex-wrap: wrap;
    justify#content: space-around;
} 

.images {
  margin-bottom: 20px;
  text-align: center;
}

.images img {
  width: 300px;
  height: 235px;
  padding: 10px 30px 0 30px;
}

.images p{
    font-size: 16px;
    margin: 0 0 0 30px;
} */


}

/*ウィンドウ幅が最少481pxの場合にPC表示終了*/
/** 【PC用】　↑↑↑　*****************************************************************************************************/
/***************************************************************************************************************************/



/************************************************************************************************************************************/
/** 【SP用】　↓↓↓　***************************************************************************************************************/
#nav-drawer {
	display: inline-block;
	position: relative;
	padding: 11px 12px 8px 17px;
	margin: 0 80% 0 0;
	background: #204DA0;
	/**　【#content .topimg】のbackgroundにあわせる　**/
	/** 角丸 **/
	border-radius: 50px;
	/* CSS3草案 */
	-webkit-border-radius: 50px;
	/* Safari,Google Chrome用 */
	-moz-border-radius: 50px;
	/* Firefox用 */
	/** 半透明（背景のみ） **/
	background-color: rgba(32, 77, 160, 0.70);
	/**　色を変える（backgroundカラーをR㎇にする）　**/
	/*********************
0が「完全に透明」　1が「完全に不透明」で、小数を使って不透明割合を指定
「55％不透明(＝45％透明)」
**********************/
}

#nav-drawer p.menu {
	font-family: "メイリオ";
	display: block;
	font-size: 10px;
	color: #ffffff;
	padding: 0;
	margin: 0 3px 0 0;
	text-align: center;
}




/** ---------------  topimg　ここから ↓↓↓ 　--------------------------------------- **/
@media screen and (max-width: 480px) {
	/*ウィンドウ幅が最少480pxの場合にPC非表示*/


	#content .topimg {
		width: 100%;
		margin: 0 0 0 0;
		padding: 0 0 10px 0;
		background: #204DA0;
		clear: both;
	}

	#content .topimg h1 {
		font-family: "メイリオ";
		font-size: 25px;
		color: #FFF;
		text-align: center;
		padding: 15px 0 0;
		margin: 0;
		line-height: 120%;
	}

	#content .topimg h2 {
		font-family: "メイリオ";
		font-size: 18px;
		font-weight: normal;
		color: #FFF;
		text-align: center;
		padding-top: 5px;
		margin: 0 auto;
		border-top: 1px solid #fff;
		width: 80%;
	}

	#content .topimg h3 {
		font-family: "メイリオ";
		font-size: 12px;
		font-weight: normal;
		color: #FFF;
		text-align: center;
		padding: 0;
		margin: 0 10px 0 0;
	}





	/******************************　main2 main3 ↓↓↓　【SP】***************************************************************/

	#content .main2,
	#content .main3 {
		text-align: center;
		width: 90%;
		margin: 20px auto;
	}

	#content .main2 p,
	#content .main3 p {
		text-align: center;
	}

	#content .main2 img,#content .main3 img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}

	/******************************　main2 ↓↓↓　【SP】***************************************************************/
	#content .main2 p.img span {
		display: block;
		font-size: 18px;
		font-weight: bold;
		margin: 20px auto;
		color: #0a3601;
	}

	#content .main2 div p {
		font-size: 16px;
	}






	/******************************　main3 ↓↓↓　【SP】***************************************************************/
	#content .main3 {
		margin: 20px auto;
		padding: 0;
	}

	#content .main3 h2 {
		font-size: 18px;
		font-weight: bold;
		margin: 0 10px 10px 15px;
		padding: 10px 0 5px;
		border-bottom: 1px dotted #ccc;
	}

	#content .main3 h2 span {
		font-size: 16px;
		font-weight: bold;
		margin: 0 0 0 1em;
		padding: 0;
	}

	#content .main3 .image-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#content .main3 .title {
		font-size: 18px;
		padding: 25px;
		margin-bottom: 30px;
		font-weight: bold;
		color: #0a3601;
		background: #bcffe365;
		background: repeating-linear-gradient(45deg,
				#d4d806,
				#d8e06c 2px,
				transparent 1px,
				transparent 7px);

	}


	#content .main3 p:not(.title) {
		font-size: 18px;
		font-weight: bold;
		color: #0a3601;

		background: aliceblue;
		padding: 20px 10px 0;
		width: 90%;
		margin: 0 auto;
		margin-top: 30px;




	}

}




/*ウィンドウ幅が最少480pxの場合にPC非表示終了*/
/** 【S用】　↑↑↑　*****************************************************************************************************/
/***************************************************************************************************************************/





/** コンテント ここまで　↑↑↑　*****************************************************************************************************/