@charset "UTF-8";
/* =============================================================================

CSS Information

 File name:	layout.css

 Style Info:	スマホ用レイアウト設定

============================================================================= */

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

 全体 style

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

main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
	display: block;
}

html {
	font-size: 16px;
}

body {
	position: relative;
	left: 0;
	overflow: hidden;
	word-wrap: break-word;
	color: #333;
	font-size: .875rem;
	font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	line-height: 1.8;
}

a {
	color: #333333;
}
a:hover {
	color: #666666;
	text-decoration: underline;
}

video, object {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}

img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom;
}


/*------------------------------------------------------------------------------

 header

------------------------------------------------------------------------------*/

.header {
	border-bottom: 1px solid #CCC;
}
.header_inner {
	padding: 15px;
}

.header .logo_block {
	width: 460px;
	max-width: 100%;
	margin-bottom: 20px;
	text-align: center;
}
.header .logo_block h1 {
	font-size: .75rem;
	font-weight: normal;
}
.header .logo_block img {
	width: 320px;
}

.outside_navi {
	display: flex;
	flex-wrap: wrap;
	max-width: 400px;
	margin: 0 auto;
	line-height: 2;
}
.outside_navi li {
	width: 50%;
}
.outside_navi a {
	display: block;
}

@media only screen and (min-width: 840px) {
	.header_inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: .75em;
	}
	.header .logo_block {
		max-width: 30%;
		margin-bottom: 0;
		text-align: left;
	}
	.outside_navi {
		max-width: none;
		flex-wrap: nowrap;
		margin-top: .75em;
	}
	.outside_navi li {
		width: auto;
		margin-left: 1em;
	}	
}


/* header_bar
-----------------------------------------------------------*/

.header_bar {
	padding: 10px 10px;
	background-color: #EEE;
}
.header_bar_inner {
	max-width: 1140px;
	margin: 0 auto;
}

.header_bar_inner .breadcrumb {
	flex: 1;
}

/* updata block */
.updata_block {
	margin-bottom: 10px;
	text-align: right;
}
.updata_block .data_box {
	display: inline-block;
}
.updata_block .btn {
	cursor: pointer;
	display: inline-block;
	padding: 6px 1em;
	border-radius: 50vh;
	background-color: #003096;
	color: #FFF;
	font-size: .75rem;
	text-decoration: none;
	line-height: 1.2;
}
.updata_block .btn.bl {
	background-color: #333;
}
.updata_block .btn:hover {
	opacity: .5;
}

/* user bloxk */
.user_block {
	margin-bottom: 10px;
	text-align: right;
}
.user_block a {
	display: inline-block;
	padding: 6px 1.5em;
	border-radius: 50vh;
	background-color: #333;
	color: #FFF;
	font-size: .75rem;
	text-decoration: none;
	line-height: 1.2;
}
.user_block a:hover {
	background-color: #999;
}
.user_block a i {
	margin-left: .25em;
	vertical-align: middle;
}

@media only screen and (min-width: 769px) {
	.header_bar_inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.updata_block {
		margin-bottom: 0;
		margin-right: 10px;
	}
	.user_block {
		margin-bottom: 0;
	}
}


/* header_msg_bar
-----------------------------------------------------------*/

.header_msg_bar {
	padding: 10px 10px;
	border-top: 1px solid #CCC;
	background-color: #d5edf7;
}
.header_msg_bar.mainte {
	background-color: #fce5e5;
}
.header_msg_inner {
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
}
.header_msg_bar.mainte .label {
	display: inline-block;
	margin-right: .5em;
}
.header_msg_bar.mainte .text {
	display: inline-block;
}


/* -------------------------------------------------------------------------------

footer

------------------------------------------------------------------------------- */

.footer {
	padding: 40px;
	border-top: 1px solid #CCC;
	text-align: center;
}
.footer .copy_block {
	font-size: .75rem;
	font-style: normal;
}


/* page top
-----------------------------------------------------------*/

.page_top_fx {
	position: fixed;
	overflow: hidden;
	bottom: 10px;
	right: 10px;
	z-index: 99999;
}

.page_top_fx a {
	display: block;
	cursor: pointer;
	width: 60px;
	height: 60px;
	border-radius: 50vw;
	background: url('data:image/svg+xml,%3Csvg%20enable-background%3D%22new%200%200%2036%2020%22%20height%3D%2220%22%20viewBox%3D%220%200%2036%2020%22%20width%3D%2236%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m35.6%2018.1c0%20.5-.2.9-.5%201.3-.7.7-1.8.7-2.5%200l-14.8-15.2-14.8%2015.2c-.7.7-1.8.7-2.5%200s-.7-1.8%200-2.5l16.1-16.4c.7-.7%201.8-.7%202.5%200l16%2016.4c.3.3.5.8.5%201.2z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E') rgba(0,0,0,0.3)  50% 45% no-repeat;
	background-size: 40% auto;
	text-indent: 100%;
	white-space: nowrap;
}


/* -----------------------------------------------------------------------------

 contents

----------------------------------------------------------------------------- */

.contents_wrapper {
	clear: both;
	max-width: 1360px;
	margin: 40px auto;
	padding: 0 15px;
}

.main_contents {
	flex: 1;
	max-width: 1280px;
	margin: 0 auto;
}

.side {
	width: 240px;
	margin-left: 40px;
}

.main_contents h2 {
	margin-bottom: 20px;
	font-size: 1.5rem;
	text-align: center;
}


/* -------------------------------------------------------------------------------

 パーツ
 
-------------------------------------------------------------------------------*/

/* ページネーション/ページャー
-----------------------------------------------------------*/

.pagination {
	clear: both;
	position: relative;
	line-height: 1.2;
	margin-bottom: 20px;
	font-size: 1rem;
}
.pagination span,
.pagination a {
	width: auto;
	margin-right: 4px;
	padding: 6px 8px 5px 8px;
	border-radius: 4px;
}
.pagination a {
	display: inline-block;
	background: #FFF;
	text-decoration: none;
}
.pagination a:hover {
	opacity: .5;
}
.pagination span {
	display: none;
}
.pagination .current {
	display: inline-block;
	padding: 6px 8px 5px 8px;
	background: #003096;
	color: #FFF;
}