/*----------------------*/
/*		common			*/
/*----------------------*/

/*	always scroll bar	*/
html{
	overflow-y:scroll;
	
	scroll-behavior: smooth;
}


/*	link control	*/
a{
	text-decoration:none;
}

a:active{
	outline: none;
}

p{
	margin: 0;
}

.sp_on{
	display:	none;
}

.pc_on{
	display:	inline;
}


/*----------------------*/
/*		body			*/
/*----------------------*/
body{

	/*背景テクスチャ*/
	background-image:	url(../img/fabric_texture.png);
	
	margin:		0px;
	
	font-family:	Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',  'MS PGothic', "ＭＳ Ｐゴシック", sans-serif;
	font-size:		16px;
}

/*----------------------*/
/*	中央コンテナ		*/
/*----------------------*/
div.container{
	width: 			60em;		/* レスポンシブ対応予定 */
	margin-left:	auto;
	margin-right:	auto;
	position:		relative;
	
	margin-top:		0;
	margin-bottom:	0;
	
	background-color: #fff;
	
	box-shadow: 0 0.75em 0.75em 0 rgba(0, 0, 0, 0.5);
}


/*----------------------*/
/*	ロゴ				*/
/*----------------------*/
div.logo_area{
}

div.top_line{
	width:		100%;
	height:		0.5em;
	
	background-color:	#0c3388;
}

img.logo_head{
	width:	320px;
	height:	56px;
	margin: 1em 0 0 1em;
}


h1.logo{
	margin: 0;
	padding: 0;
}


/*----------------------*/
/*	上部メニュー関連	*/
/*----------------------*/
div.menu_area{
	width:		57.5em;
	
	margin:		2em auto 2em auto;
	
	display:		flex;
	flex-wrap:		nowrap;
}



div.menu_item{
	display:		table-cell;
	color:			#000000;
	
	width:			11.5em;
	height:			2.5em;
	font-weight:	bold;
	
	text-align:		center;
	vertical-align:	middle;
	
	border:			double 3px #0c3388;
	
	border-left-style:	none;
	border-right-style:	none;
}

div.menu_item:hover{
	color:				#0000ff;
	background-color:	#e8e8ff;
	transition:			0.1s
}



/*----------------------*/
/*	フッター関連		*/
/*----------------------*/
/*	footer area	*/
div.footer{
}

/*メニューをページ下部に固定*/
div.sp_footer_menu{
	display:	none;
	
	width:		100%;

	position:	fixed;
	bottom:		0;
	
	text-align:	center;
}

div.sp_footer_menu_bg{
	width: 100%;
	height: 2.5em;
	
	position:	relative;
	top:		2.5em
}

div.sp_footer_menu_bg:before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}

div.sp_footer_menu_icon{
	color:		#fff;
	font-size:	32px;
	
	position:	relative;
	
	top:		3px;
}

/*----------------------*/
/*	メインコンテンツ	*/
/*----------------------*/
div.main_area{
	width:			48em;
	margin-left:	auto;
	margin-right:	auto;
}


div.topic_block{
	padding-bottom:	2em;
}


hr.border{
	border-width:	1px 0px 0px 0px;
	border-style:	solid;
	border-color:	#e5e7fa;
	
	margin-top:		1em;
	margin-bottom:	1em;
}


h2.topic_header{
	font-size:		20px;
	font-weight:	bold;
	
	color:			#ffffff;
	background-color:	#0c3388;
	
	border:			0px;
	
	/*width:			10em;*/
	text-align:		center;
	
	padding-left:	1em;
	padding-right:	1em;
	
	margin-bottom:	1em;
}

p.topic_text{
	margin-left:	1em;
}





/*--------------------------*/
/*		for responsive		*/
/*--------------------------*/
/*1023px以下*/
@media screen and (max-width: 1023px){
	body{
		background-image:	none;
	}
	
	div.container{
		width: 			100%;
		box-shadow:		none;
	}
	
	div.menu_area{
		width:			45em;
		margin-left:	auto;
		margin-right:	auto;
	}
	
	div.menu_item{
		width:			9em;
	}

	
	div.main_area{
		width:			43em;
		margin-left:	auto;
		margin-right:	auto;
	}
}


/*719px以下*/
@media screen and (max-width: 719px){
}


/*499px以下*/
@media screen and (max-width: 499px){
	
	.sp_on{
		display:	inline;
	}

	.pc_on{
		display:	none;
	}
	
	
	div.logo_area{
		margin-bottom:	2em;
	}
	
	img.logo_head{
		width:		240px;
		height:		42px;
	}
	
	div.menu_area{
		display:	none;
	}
	
	div.menu_item{
		display:	none;
	}
	
	
	div.sp_footer_menu{
		display:	block;
	}
	
	div.main_area{
		width:			22em;
		margin-left:	auto;
		margin-right:	auto;
	}
	
	
	hr.border{
		margin:		1em 0 1em 0;
	}
	
	p.topic_text{
		margin-left:	0em;
	}
}

/*499px以下*/
@media screen and (max-width: 499px){
	body{
		font-size:		14px;
	}
	
	h2.topic_header{
		font-size:		18px;
	}
}


/*352px以下*/
@media screen and (max-width: 352px){
	img.logo_head{
		width:		200px;
		heiht:		35px;
	}
	
	div.main_area{
		width:			98%;
		margin-left:	auto;
		margin-right:	auto;
	}
	
	div.sp_footer_menu_bg{
		height: 	40px;
		top:		40px;
	}
	
	p.topic_header{
		font-size:		14px;
	}
}

/*300px以下*/
@media screen and (max-width: 300px){
	body{
		font-size:		12px;
	}
	
	h2.topic_header{
		font-size:		16px;
	}
}