@charset "UTF-8";

/********************************************************************************
 * サイト用の基本設定
 * クラス名は原則どのサイトでも同じにすること。(毎回、違うものを作らない)
 *   -->メニュー、ヘッダー、コンテンツ領域、フッター等、共通化できるものが多い
 *		違う用途のものは極力避ける。
 ********************************************************************************/
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, em, img, small, strong, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin:					0;
	padding:				0;
	border:					0;
	outline:				0;
	font-size:				100%;
	font-style:				normal;
	font-weight:			normal;
	vertical-align:			baseline;
	background:				transparent;
}
html {
    display:				flex;
	flex-direction:			column;
	overflow-y:				scroll;
}

/***********************************************************
 * サイト幅
 ***********************************************************/
body {
    display:				flex;
	flex-direction:			column;
	width:					100%;
	min-height:				100vh;
	background:				#f3f3f3;
	font-size:				14px;
	font-family:			"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	line-height:			1.7;
	color:					#333;
	min-width:				990px;
}
@media only screen and (max-width:800px){
	body{
		min-width:			0px;
	}
}

.container {
	width:					100%;
}
@media only screen and (max-width:800px){
	.container {
		width:				100%;
	}
}

/***********************************************************
 * グループ関連タグの初期化
 ***********************************************************/
article, aside, figcaption, figure, footer, header, menu, nav, section {
	display:				block;
}

/***********************************************************
 * リストタグ
 ***********************************************************/
ul {
	list-style:				none;
}

/***********************************************************
 * 内容表示領域
 ***********************************************************/
.contents {
	flex-grow:				1;
	background:				#f3f3f3;
	padding:				0px 0;
}
.area-contents {
	background:				#fff;
	border-radius:			8px;
	padding:				20px;
}
@media only screen and (max-width:800px){
	.area-contents {
		padding:			10px 10px 20px;
	}
}

/***********************************************************
 * 画像タグ
 ***********************************************************/
img {
	max-width:				100%;
	height:					auto;
	border:					none;
	vertical-align:			middle;
}

/***********************************************************
 * アンカータグ
 ***********************************************************/
a {
	margin:					0;
	padding:				0;
	font-size:				100%;
	vertical-align:			baseline;
	background:				transparent;
}
a:link,
a:visited {
	color:						#333;
	text-decoration:			none;
}
a:hover,a:active {
	text-decoration:			none;
}
a.underline:link,
a.underline:visited {
	color:						#3f9ab8;
	text-decoration:			underline;
}
a.underline:hover,
a.underline:active {
	text-decoration:			none;
}

/***********************************************************
 * ヘッダー
 ***********************************************************/
.head-main {
	width:						100%;
	display:					flex;
	justify-content:			space-between;
	align-items:				center;
	padding:					10px 20px 10px 10px;
	border-bottom:				solid 1px #0d391a;
}
.head-main ul {
	font-size:					0;
}
.head-main ul li {
	display:					inline-block;
	text-align:					center;
	vertical-align:				middle;
	cursor:						pointer;
}
.head-main ul li:not(:last-of-type) {
	margin-right:				20px;
}
.head-main ul li span {
	display:					block;
	font-size:					10px;
	font-weight:				bold;
	color:						#0d391a;
	margin-top:					2px;
}

/***********************************************************
 * グローバルナビゲーション
 ***********************************************************/
header > nav {
	background:					#0d391a;
}

ul.g-navi {
	width:						960px;
	display:					flex;
	justify-content:			space-between;
	margin:						0 auto;
}
ul.g-navi > li {
	position:					relative;
	flex:						auto;
	border-right:				solid 1px rgba(255, 255, 255, .1);
}
ul.g-navi > li:first-of-type {
	border-left:				solid 1px rgba(255, 255, 255, .1);
}

ul.g-navi > li a {
	display:					block;
	color:						#fff;
	text-align:					center;
	padding:					10px 0;
	cursor:						pointer;
	transition:					.3s;
}
ul.g-navi > li a:hover {
	background:					rgba(255, 255, 255, .1);
}
.sub-menu {
	display:					none;
	width:						100%;
	position:					absolute;
	background:					rgba(0, 0, 0, .8);
	border-top:					solid 1px rgba(255, 255, 255, .1);
	z-index:					2;
}
.sub-menu li {
	border-bottom:				dashed 1px rgba(255, 255, 255, .1);
}
.sub-menu li:last-of-type {
	border-bottom:				none;
}
.sub-menu li a {
	display:					block;
	font-size:					13px;
	color:						#fff;
	padding:					10px 0;
	transition:					.3s;
}
.sub-menu li a:hover {
	background:					rgba(255, 255, 255, .2);
}

/***********************************************************
 * パンくずリスト
 ***********************************************************/
.area-breadcrumb {
	background:					#fff;
	border:						solid 2px rgba(13, 57, 26, .1);
	border-radius:				5px;
	font-size:					0;
	padding:					10px 0;
}
.area-breadcrumb li {
	position:					relative;
	display:					inline-block;
	font-size:					14px;
	vertical-align:				middle;
	padding:					0 20px;
}
.area-breadcrumb li:not(:last-of-type)::after {
	position:					absolute;
	top:						50%;
	right:						0;
	transform:					translateY(-50%) rotate(45deg);
	content:					'';
	display:					inline-block;
	width:						6px;
	height:						6px;
	border:						solid #de574a;
	border-width:				1px 1px 0 0;
	margin-left:				10px;
}

/***********************************************************
 * 見出し
 ***********************************************************/
.head-contents {
	display:				flex;
	justify-content:		space-between;
	align-items:			center;
}
.ttl-common {
	font-size:				20px;
	font-weight:			bold;
	padding-left:			27px;
	text-indent:			-27px;
}
.ttl-common::before {
	position:				relative;
	top:					1px;
	content:				'\f10c';
	font-family:			FontAwesome;
	font-size:				24px;
	color:					#de574a;
	margin-right:			6px;
}
.ttl-remember {
	font-size:				20px;
	font-weight:			bold;
	padding-left:			27px;
	text-indent:			-27px;
}

/***********************************************************
 * バッチ
 ***********************************************************/
/* 必須 */
.require {
	position:					relative;
}
.require::after {
	position:					absolute;
	top:						50%;
	right:						0;
	transform:					translateY(-50%);
	display:					block;
	content:					'必須';
	background:					#e05745;
	font-size:					11px;
	color:						#fff;
	padding:					.15em .8em;
}
/* 任意 */
.optional {
	position:					relative;
}
.optional::after {
	position:					absolute;
	top:						50%;
	right:						0;
	transform:					translateY(-50%);
	display:					block;
	content:					'任意';
	background:					#d57c08;
	font-size:					11px;
	color:						#fff;
	padding:					.15em .8em;
}

/***********************************************************
 * ボタン
 ***********************************************************/
/***** 共通設定 *****/
.btn-common {
	display:				block;
	border-radius:			3px;
	font-size:				12px;
	font-weight:			bold;
	padding:				4px 10px;
}

/***** 赤グラデーション *****/
.btn-red-grad {
	background:				#de574a;																						/* Old browsers */
	background:				-moz-linear-gradient( 45deg, #de574a 0%, #ff0000 100% );										/* FF3.6-15 */
	background:				-webkit-linear-gradient( 45deg, #de574a 0%, #ff0000 100% );										/* Chrome10-25,Safari5.1-6 */
	background:				linear-gradient( 45deg, #de574a 0%, #ff0000 100% );												/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:				progid:DXImageTransform.Microsoft.gradient( startColorstr='#de574a', endColorstr='#ff0000', GradientType=1 );	/* IE6-9 fallback on horizontal gradient */
}

/***** 青グラデーション *****/
.btn-blue-grad {
	background:				#50cce5;																						/* Old browsers */
	background:				-moz-linear-gradient( 45deg, #50cce5 0%, #1078e8 100% );										/* FF3.6-15 */
	background:				-webkit-linear-gradient( 45deg, #50cce5 0%, #1078e8 100% );										/* Chrome10-25,Safari5.1-6 */
	background:				linear-gradient( 45deg, #50cce5 0%, #1078e8 100% );												/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter:				progid:DXImageTransform.Microsoft.gradient( startColorstr='#50cce5', endColorstr='#1078e8',GradientType=1 );	/* IE6-9 fallback on horizontal gradient */
}

/***** 検索ボタン *****/
.btn-search {
	position:				relative;
	display:				inline-block;
	color:					#333;
	font-size:				13px;
	padding-left:			15px;
	cursor:					pointer;
}
.btn-search::before,
.active::before {
	position:				absolute;
	left:					0;
	content:				'';
	display:				block;
	width:					6px;
	height:					6px;
	border:					solid #333;
	border-width:			1px 1px 0 0;
}
.btn-search::before {
	top:					8px;
	transform:				rotate(135deg);
	transition:				.3s
}
.active::before {
	top:					10px;
	transform:				rotate(-45deg);
}
@media all and (-ms-high-contrast:				none) {
	.btn-search::before {
		top:				6px;
		transition:			.3s
	}
	.active::before {
		top:				9px;
	}
}

/***** 送信、キャンセルボタン *****/
.btn-submit,
.btn-cancel {
	display:				inline-block;
	border-radius:			3px;
	padding:				6px 10px;
	text-align:				center;
	cursor:					pointer;
	line-height:			1;
}
.btn-submit input,
.btn-cancel input {
	font-family:			"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	color:					#fff;
	font-size:				12px;
	font-weight:			bold;
	cursor:					pointer;
}
.btn-submit {
	background:				#de574a;
}
.btn-cancel {
	background:				#444;
}

/***** ダウンロードボタン ****/
.btn-button {
	font-family:				"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	color:						#000;
	font-size:					12px;
	font-weight:				bold;
	cursor:						pointer;
	padding: 2px 5px 2px 5px;
	border-radius: 4px;
	border: 1px solid gray;
}

/***** 新規登録ボタン *****/
.btn-add {
	display:				inline-block;
	background:				#fff;
	border:					solid 1px #3d6148;
	border-radius:			30px;
	font-size:				14px;
	padding:				0 10px;
}

.btn-add::before {
	position:				relative;
	top:					2px;
	content:				'';
	display:				inline-block;
	width:					16px;
	height:					14px;
	background:				url( '../images/ico-add.png' ) 50% 50% no-repeat;
	background-size:		contain;
	margin-right:			2px;
}

/***** 編集ボタン *****/
.btn-edit {
	display:				inline-block;
	background:				#fff;
	border:					solid 1px #3d6148;
	border-radius:			30px;
	font-size:				14px;
	padding:				0 10px;
}

.btn-edit::before {
	position:				relative;
	top:					2px;
	content:				'';
	display:				inline-block;
	width:					16px;
	height:					14px;
	background:				url( '../images/ico-edit.png' ) 50% 50% no-repeat;
	background-size:		contain;
	margin-right:			2px;
}

/***** テーブル内に表示するボタン *****/
.btn-middle {
	display:				inline-block;
	background:				#fdbd5d;
	border:					solid 2px rgba(0, 0, 0, .075);
	border-radius:			30px;
	font-size:				14px;
	padding:				0 10px;
}

.btn-small {
	display:				inline-block;
	background:				#fdbd5d;
	border:					solid 2px rgba(0, 0, 0, .075);
	border-radius:			30px;
	font-size:				11px;
	padding:				0 10px;
}

/***** インライン用ボタン *****/
.btn-col2 > div {
	display:				inline-block;
}
.btn-col2 > div:not(:last-of-type) {
	margin-right:			10px;
}

/***** ボタン用アイコン *****/
.ico-awesome::before {
	display:				inline-block;
	position:				relative;
	font-family:			FontAwesome;
	color:					#fff;
	font-weight:			normal;
}
.ico-search::before {
	top:					1px;
	transform:				rotate(90deg);
	content:				'\f002';		/* 検索アイコン */
}
.ico-preserve::before {
	top:					2px;
	content:				'\f046';		/* 保存アイコン */
}
.ico-cancel::before {
	top:					2px;
	content:				'\f00c';		/* 取消アイコン */
}
.ico-export::before {
	top:					2px;
	content:				'\f019';		/* 出力アイコン */
}
.ico-import::before {
	top:					1px;
	content:				'\f093';		/* 取込アイコン */
}
.ico-plus::before {
	content:				'\f055';		/* プラスアイコン */
	margin-right:			5px;
}

@media only screen and (max-width:800px){
	.for-table {
		font-size:			14px;
		margin:				0 auto;
		padding:			2px 30px;

	}
}

/***********************************************************
 * テーブル
 ***********************************************************/
table {
	border-collapse:		collapse;
	border-spacing:			0;
}

/***************************************
 * 一覧画面用
 ***************************************/
.table-layout01 {
	border-collapse:		collapse;
	width:					100%;
	border:					solid #d9d9d9;
	border-width:			0 1px 1px 1px;
	font-size:				13px;
/*	table-layout:			fixed; */
	text-align:				left;
}
/***** テーブル項目名 *****/
.table-layout01 th {
	background:				#3d6148;
	border-right:			solid 1px rgba(255, 255, 255, .4);
	color:					#fff;
	padding:				7px;
	text-align:				left;
}
/*** ソートアイコン ***/
.table-layout01 th a::after {
	position:				absolute;
	top:					50%;
	right:					-10px;
	transform:				translateY(-50%);
	display:				block;
	content:				'';
	width:					4px;
	height:					12px;
	background:				url( '../images/sort_default.png' );
	background-size:		contain;
}
.table-layout01 th a.desc::after {
	position:				absolute;
	top:					50%;
	right:					-10px;
	transform:				translateY(-50%);
	display:				block;
	content:				'';
	width:					4px;
	height:					12px;
	background:				url( '../images/sort_desc.png' );
	background-size:		contain;
}
.table-layout01 th a.asc::after {
	position:				absolute;
	top:					50%;
	right:					-10px;
	transform:				translateY(-50%);
	display:				block;
	content:				'';
	width:					4px;
	height:					12px;
	background:				url( '../images/sort_asc.png' );
	background-size:		contain;
}
.table-layout01 th:first-of-type {
	border-left:			solid 1px #3d6148;
}
.table-layout01 th:last-of-type {
	border-right:			solid 1px #3d6148;
}
/***** 項目幅 *****/
.col-no {
	width:					90px;
}
.col-date {
	width:					120px;
}
.col-datetime {
	width:					160px;
}
.col-time {
	width:					120px;
}
.col-button {
	width:					90px;
}
.width80 {
	width:					80px;
}
.width100 {
	width:					100px;
}
.width120 {
	width:					120px;
}
.width140 {
	width:					140px;
}
.width160 {
	width:					160px;
}
.width180 {
	width:					180px;
}
.width200 {
	width:					200px;
}
/***** 項目値 *****/
.table-layout01 tbody tr:not(:last-of-type) {
	border-bottom:			dotted 1px #d9d9d9;
}
.table-layout01 tbody tr:nth-of-type(even) {
	background:				rgba(0, 0, 0, .05);
}
.table-layout01 td {
	border-right:			solid 1px #d9d9d9;
	overflow:				hidden;
	padding:				7px 3px;
}
.table-layout01 td:last-of-type {
	border-right:			none;
}
/***** 領域を超えた場合、省略(...)を表示する *****/
.table-layout01 td.ellipsis {
	white-space:			nowrap;
	text-overflow:			ellipsis;
}

/***************************************
 * ダイアログ用
 ***************************************/
.table-layout02 {
	border-collapse:		collapse;
	width:					100%;
	border:					solid #d9d9d9;
	border-width:			1px 0 1px 0;
	font-size:				13px;
	text-align:				left;
}
.table-layout02 th {
	width:					20%;
	background:				#f3f3f3;
	color:					#333;
	padding:				8px 10px;
	border-bottom:			solid 1px #d9d9d9;
	text-align:				left;
}

.tablelayout02 tr:last-of-type th {
	border-bottom:			none;
}

.table-layout02 td {
	padding:				8px 10px;
}
.table-layout02 tr:not(:last-of-type) td {
	border-bottom:			dotted 1px #d9d9d9;
}

/***** 位置調整用 *****/
.table-col01 {
	width:					70px;
}
.table-col02 {
	width:					50px;
}
.pos-top {
	vertical-align:			top;
}

@media only screen and (max-width:800px){
	.table-layout01 {
		border:				none;
	}
	.table-layout01 td,
	.table-layout01 th {
	    border:				0;
	}
	.table-layout01 thead {
	    display:			none;
	}
	.table-layout01 tbody tr:not(:last-of-type) {
		border-bottom:		none;
	}
	.table-layout01 tbody tr:nth-of-type(even) {
		background:			#fff;
	}
	.table-layout01 tbody tr {
		display:			block;
		margin-bottom:		20px;
	}
	.table-layout01 tbody th {
		display:			block;
	}
	.table-layout01 tbody td {
		display:			flex;
		align-items:		center;
		width:				100%;
		background:			-moz-linear-gradient( left, #3d6148 30%, #ffffff 30% );		/* FF3.6-15 */
		background:			-webkit-linear-gradient( left, #3d6148 30%, #ffffff 30% );	/* Chrome10-25,Safari5.1-6 */
		background:			linear-gradient( to right, #3d6148 30%, #ffffff 30% );		/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		border:				solid #d9d9d9;
		border-width:		0 1px 1px 1px;
		white-space:		normal;
		overflow:			hidden;
		text-overflow:		clip;
		padding:			10px;
	}
	.table-layout01 tbody td:first-of-type {
		border-top:			solid 1px #d9d9d9;
	}
	.table-layout01 tbody td:last-of-type {
		background:			none;
		border:				none;
		padding:			10px 0;
	}
	.table-layout01 tbody td::before {
		flex-shrink:			0;
	}
	.table-layout01 tbody td::before {
		width:				30%;
		content:			attr(label);
		color:				#fff;
		text-align:			left;
		padding-right:		10px;
		margin-right:		10px;
	}
	.table-layout01 tbody td:last-of-type::before {
		content:			none;
	}
	.table-layout02 {
		border-width:		0;
	}
	.table-layout02 th,
	.table-layout02 td {
		display:			block;
	}
	.table-layout02 th {
		width:				100%;
		background:			#f3f3f3;
		color:				#333;
		padding:			8px 10px;
		border-top:			solid 1px #d9d9d9;
		border-bottom:		solid 1px #d9d9d9;
	}

	.table-layout02 td {
		padding:			8px 10px;
	}
	.table-layout02 tr:not(:last-of-type) td {
		border-bottom:		none;
	}
}

/*******************************************************************************
 * 入力タグ
 *******************************************************************************/
/***********************************************************
 * 共通設定
 ***********************************************************/
/* iOSでのデフォルトスタイルをリセット */
input, select, textarea {
	vertical-align:			middle;
	margin:					0;
	padding:				0;
	background:				none;
	border:					none;
	border-radius:			0;
	outline:				none;
	-webkit-appearance:		none;
	-moz-appearance:		none;
	appearance:				none;
	font-size:				16px;
}
select::-ms-expand {
    display:				none;
}
input {
	border-radius:			0;
	-webkit-box-sizing:		content-box;
	-webkit-appearance:		button;
	appearance:				button;
	border:					none;
	box-sizing:				border-box;
	outline:				none;
}
input::-webkit-search-decoration {
	display:				none;
}
input::focus {
	outline-offset:			-2px;
}
input.common,
select.common {
	height:					28px;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			3px;
	font-size:				12px;
	padding:				0 10px;
}
/***** プレースホルダー *****/
input::placeholder {
	color:					rgba(0, 0, 0, .4);
}
/***** 必須項目 *****/
input .require,
select .require{
	background:				#fff9fc !important;
}
/***** オプション項目 *****/
input .optional,
select .optional{
	background:				#f9e4b7 !important;
}

textarea.common{
	width:					100%;
	outline:				none;
	resize:					none;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			2px;
	font-family:			"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size:				12px;
	padding:				10px;
	line-height:			1.6;
}

/***********************************************************
 * box設定
 ***********************************************************/
.box-inline {
	display:				flex;
	align-items:			center;
}
.box-inline span {
	margin:					0 5px;
}
.box-inline div:first-of-type::after {
	display:				inline-block;
	margin:					0 5px;
}
.box-price div::before {
	content:				'￥';
	font-size:				12px;
}
.box-calendar label {
	position:				relative;
	display:				block;
}
.box-calendar label::after {
	position:				absolute;
	top:					50%;
	right:					10px;
	transform:				translateY(-50%);
	display:				block;
	content:				'\f073';
	font-family:			FontAwesome;
	color:					#0d391a;
}

/***********************************************************
 * ドロップダウン
 ***********************************************************/
.select-category label {
	position:				relative;
	display:				inline-block;
}
.select-category label::before {
	position:				absolute;
	top:					50%;
	right:					10px;
	transform:				translateY(-50%);
	display:				block;
	font-family:			FontAwesome;
	content:				"\f107";
	pointer-events:			none;
}
.select-category select {
	width:					auto;
	height:					28px;
	background:				#fff;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			2px;
	padding:				0 30px 0 10px;
}

/***********************************************************
 * チェックボックス
 ***********************************************************/
.check-status {
	font-size:				12px;
}
.check-status input {
	display:				none;
}

.check-status input + label {
	display:				inline-block;
	width:					22px;
	height:					22px;
	border-radius:			2px;
	vertical-align:			bottom;
	cursor:					pointer;
}
.check-select + label {
	background:				#fff;
	border:					solid 1px rgba(0, 0, 0, .2);
	margin-right:			2px;
}
.check-select:checked + label {
	position:				relative;
	background:				rgba(42, 194, 120, .3);
}
.check-select:checked + label::before {
	display:				block;
	content:				'\f00c';
	font-family:			FontAwesome;
	position:				absolute;
	top:					50%;
	left:					50%;
	transform:				translate(-50%, -50%);
	color:					#2ac278;
	font-size:				14px;
	margin:					0 auto;
}

/***********************************************************
 * ラジオボタン
 ***********************************************************/
.radio-type01 {
	display:				none;
}
.radio-parts01 {
	display:				inline-block;
	position:				relative;
	padding-left:			24px;
	margin-right:			30px;
	vertical-align:			middle;
}
.radio-parts01::before {
	content:				"";
	display:				inline-block;
	position:				absolute;
	top:					0;
	left:					0;
	width:					20px;
	height:					20px;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			50%;
}
.radio-type01:checked + .radio-parts01::after {
	content:				"";
	display:				block;
	position:				absolute;
	top:					0;
	left:					5px;
	bottom:					0;
	margin:					auto;
	width:					10px;
	height:					10px;
	background:				#34ac8a;
	border-radius:			50%;
}

/***********************************************************
 * ファイル選択
 ***********************************************************/
.select-files {
	display:				flex;
}
.select-files input,
.select-files label {
	display:				table-cell;
	vertical-align:			middle;
}
.select-files label {
	flex-shrink:			0;
	height:					28px;
	background:				#444;
	border-radius:			0 2px 2px 0;
	font-size:				12px;
	color:					#fff;
	padding:				5px 14px;
	cursor:					pointer;
}
.select-files label input {
	display:				none;
}
.select-files input {
	width:					auto;
	height:					28px;
	border:					solid rgba(0, 0, 0, .2);
	border-width:			1px 0 1px 1px;
	border-radius:			2px 0 0 2px;
	padding:				0 10px;
}
.field-text textarea {
	width:					auto;
	outline:				none;
	resize:					none;
	border:					solid 1px rgba(0, 0, 0, .2);
	border-radius:			2px;
	font-family:			"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size:				12px;
	padding:				10px;
	line-height:			1.6;
}

/***********************************************************
 * テキストエリア
 ***********************************************************/
.field-text textarea {
	width:					100%;
}
.w100 {
	width:					100px;
}
.w120 {
	width:					120px;
}
.w150 {
	width:					150px;
}
.w200 {
	width:					200px;
}
.w300 {
	width:					300px;
}
@media only screen and (max-width:500px){
	.select-files input {
		width:				100%;
		flex-grow:			1;
	}
}
@media only screen and (max-width:380px){
	.w300 {
		width:				100%;
	}
}

/***********************************************************
 * タブメニュー
 ***********************************************************/
label.panel_label {
	-webkit-user-select:	none;
	-moz-user-select:		none;
	-ms-user-select:		none;
	user-select:			none;
	display:				block;
	width:					100%;
	font-family:			"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	color:					#3d6148;
	cursor:					pointer;
}
#panels main {
	display:				none;
	box-sizing:				border-box;
	max-height:				0;
	opacity:				0;
	overflow-y:				hidden;
}
#panel_ctrl01:checked ~ #panels #panel_inner01 main,
#panel_ctrl02:checked ~ #panels #panel_inner02 main,
#panel_ctrl03:checked ~ #panels #panel_inner03 main,
#panel_ctrl04:checked ~ #panels #panel_inner04 main,
#panel_ctrl05:checked ~ #panels #panel_inner05 main,
#panel_ctrl06:checked ~ #panels #panel_inner06 main {
	display:				inline;
	max-height:				initial;
	opacity:				1;
}

#panel_ctrl01:checked ~ .tabs_list #li-for-panel_inner01 label.panel_label,
#panel_ctrl02:checked ~ .tabs_list #li-for-panel_inner02 label.panel_label,
#panel_ctrl03:checked ~ .tabs_list #li-for-panel_inner03 label.panel_label,
#panel_ctrl04:checked ~ .tabs_list #li-for-panel_inner04 label.panel_label,
#panel_ctrl05:checked ~ .tabs_list #li-for-panel_inner05 label.panel_label,
#panel_ctrl06:checked ~ .tabs_list #li-for-panel_inner06 label.panel_label {
	background:				#3d6148;
	color:					#fff;
}

.tabs_list {
	display:				table;
	width:					100%;
	list-style:				none;
	font-size:				0;
	margin:					0;
	padding:				0;
	text-align:				center;
	margin-bottom:			30px;
}
.tabs_list li {
	display:				inline-table;
	width:					120px;
	height:					26px;
	line-height:			26px;
	border:					solid #3d6148;
	background:				#fff;
	border-width:			2px 0 2px 2px;
	font-size:				13px;
	text-align:				center;
}
.tabs_list li:first-of-type {
	border-radius:			3px 0 0 3px;
}
.tabs_list li:last-of-type {
	border-width:			2px;
	border-radius:			0 3px 3px 0;
}
.panel-radios {
	display:				none;
}


/***********************************************************
 * お知らせ
 ***********************************************************/
#news_notice span.new-cnt {
    display: inline-block;
    background: #df002c; 
    position: absolute;
    top: 10px;
    right: 310px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
    font-size: x-small;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
}

/***********************************************************
 * ページネーション
 ***********************************************************/
.pagenation {
	font-size:				0;
}
.pagenation li {
	display:				inline-block;
	font-size:				12px;
	margin-right:			5px;
	text-align:				center;
}
.pagenation li.current {
	width:					26px;
	height:					26px;
	line-height:			26px;
	background:				#444;
	border-radius:			3px;
	border:					solid 1px #444;
	color:					#fff;
}
.pagenation li a {
	display:				block;
	width:					26px;
	height:					26px;
	line-height:			26px;
	background:				#fff;
	border:					solid 1px #444;
	border-radius:			3px;
	color:					#444;
	transition:				.3s;
}
.pagenation li a:hover {
	background:				#444;
	color:					#fff;
}
@media only screen and (max-width:800px){
	.pagenation {
		text-align:			center;
	}
}

/***********************************************************
 * ページトップへリンクするボタン
 ***********************************************************/
#page_top {
	position:				fixed;
	bottom:					20px;
	right:					20px;
	z-index:				1;
}
#page_top a {
	position:				relative;
	display:				block;
	width:					60px;
	height:					60px;
	border-radius:			50%;
	background:				#e05745;
	color:					#fff;
	text-align:				center;
}
#page_top a::before {
	position:				absolute;
	top:					60%;
	left:					50%;
	transform:				translate(-50%,-60%) rotate(-45deg);
	content:				'';
	display:				block;
	width:					20px;
	height:					20px;
	border:					solid #fff;
	border-width:			2px 2px 0 0;
}

/***********************************************************
 *
 ***********************************************************/
#jquery-ui-dialog-table {
    font-size: 13px;
}
#jquery-ui-dialog-table th , #jquery-ui-dialog-table td {
    border: 1px solid gray;
}
.ui-dialog-titlebar {
    color:white;
    background:blue;
}
.ui-widget-content .ui-state-default{
    color:white;
    background:blue;
}

.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable {
    background: white;
    border: solid gray;
}

/***********************************************************
 * フッター
 ***********************************************************/
footer {
	background:				#0d391a;
	font-size:				14px;
	color:					#fff;
	padding:				10px 0;
}