@charset "utf-8";
/* CSS Document */

/****************************/
/* CSS Reset				*/
/****************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html{
	height: 100%;
	min-height: 100%;
}
body {
	font-family: 'Hiragino Kaku Gothic ProN',
				 'ヒラギノ角ゴ ProN W3',
				 Meiryo,
				 メイリオ,
				 Osaka,
				 'MS PGothic',
				 arial,
				 helvetica,
				 sans-serif;
	position: relative;
	box-sizing: border-box;
	min-width: 320px;
	min-height: 100%;
	padding-top: 48px;
	font-size: 14px;
	color: #333;
	background-color: #fff;
	line-height: 1;
	overflow-y: scroll;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img{
	vertical-align: middle;
}
img.lazy{
	background-color: #fff;
	outline: 1px solid #FFF;
	outline-offset: -1px;
}
input,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 3px;
	background-color: #FFF;
}
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: 36px;
	padding: 0;
	outline: none;
	border: 0 none;
	border-radius: 3px;
	cursor: pointer;
	font-family: 'Hiragino Kaku Gothic ProN',
				 'ヒラギノ角ゴ ProN W3',
				 Meiryo,
				 メイリオ,
				 Osaka,
				 'MS PGothic',
				 arial,
				 helvetica,
				 sans-serif;
}
.link{
	color: #22F;
}
.link:hover{
	text-decoration: underline;
	cursor: pointer;
}

/****************************/
/* 共通設定					*/
/****************************/
.clearfix::after {
	content: "";
	clear: both;
	display: block;
}
.flex_box {
	display: -webkit-flex;
	display: flex;
}
.hide{
	display: none;
}
.function_wrap{
	position: relative;
}
.gray{
	color: #999 !important;
}
.light-gray{
	color: #ccc !important;
}
.left{
	text-align: left;
}
.center{
	text-align: center;
}
.right{
	text-align: right;
}
.red {
	color: #dd5656;
}
.fc-white {
	color: #fff;
}
.fc-black {
	color: #000;
}
.input_error {
	background-color: #FAA;
}
.caption{
	position: relative;
	padding: 0 56px;
	font-weight: bold;
	display: inline-block;
}
.caption::before{
	position: absolute;
	top: 6px;
	left: 0;
	content: "";
	display: block;
	height: 1px;
	width: 46px;
	background-color: #333;
}
.caption::after{
	position: absolute;
	top: 6px;
	right: 0;
	content: "";
	display: block;
	height: 1px;
	width: 46px;
	background-color: #333;
}
.display{
	min-height: 11px;
}

/****************************/
/* フォーム設定					*/
/****************************/
/* 入力用 */
.form_item {
    width: 100%;
    margin-bottom: 24px;
}
.form_item > div:first-child {
	float: left;
	width: 150px;
	padding: 12px 0 2px 0;
	margin-right: 10px;
}
.form_item > div.jpen_hd:first-child {
	padding: 3px 0 2px 0;
}
.form_item > div:last-child {
	float: left;
	width: 500px;
}
.tab_hd label{
	display: table;
	width: 100%;
}
.tab_hd label > div{
	display: table-cell;
}
.form_item label > p,
.form_item .jpen_hd label p 
{
	margin-bottom: 3px;
}
.form_item .form_hd_text span {
	font-size: 12px;
	color: #aaa;
}
.input_tag{
	vertical-align: top;
	text-align: right;
}
.input_tag > span,
.input_tag > span{
	box-sizing: border-box;
	display: inline-block;
	font-size: 10px;
	padding: 4px 5px 2px 5px;
	margin-left: 4px;
	border-radius: 2px;
	color: #FFF;
	background-color: #999;
}
.input_tag > span.tab_BL{
	background-color: #2c4d8f;
}
.input_tag > span.tab_required{
	background-color: #d30014;
}
input[type="text"]{
    padding: 4px 10px 4px 10px;
	font-size: 14px;
    box-sizing: border-box;
}
input[type="tel"],
input[type="password"],
input[type="date"],
select,
textarea {
	width: 100%;
	height: 26px;
    padding: 4px 10px 4px 10px;
	font-size: 14px;
    box-sizing: border-box;
}
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	background-color: #fffee2;
}
input[type="text"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled,
input[type="date"]:disabled,
select:disabled,
textarea:disabled {
	background-color: #ddd;
}
/* チェックボックス */
.checkbox_wrap {
	min-height: 22px;
}
.checkbox_wrap input {
	display: none;
}
.checkbox_wrap label {
    position: relative;
    padding: 0px 0 0 24px;
    cursor: pointer;
}
.checkbox_wrap label .sub_text {
	display:block;
	color: #999;
	font-size: 10px;
	margin-left: 32px;
}
.checkbox_wrap label.must {
	color: #bbb;
}
.checkbox_wrap label::before {
    position: absolute;
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    top: 3px;
    left: 0px;
    background: #FFF;
}
.checkbox_wrap label.disabled::before {
    opacity: 0.2;
}
.checkbox_wrap input[type="checkbox"]:checked + label::before {
    background-color: #419db1;
    border: 1px solid #419db1;
}
.checkbox_wrap input[type="checkbox"]:checked + label.must::before {
    background-color: #ddd;
    border: 1px solid #ddd;
}
.checkbox_wrap input[type="checkbox"]:checked + label::after {
	content: "";
	display: block;
	width: 4px;
	height: 10px;
	border-bottom: 2px solid #FFF;
	border-right: 2px solid #FFF;
	position: absolute;
	top: 5px;
	left: 6px;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
}
/* チェックボタン */
.check_btn_area{
	font-size: 12px;
	display: table;
}
.check_btn_area > h3,
.check_btn_area > div{
	display: table-cell;
	vertical-align: top;
	white-space: nowrap
}
.check_btn_area > h3{
	padding-top: 6px;
}
.shipping_status{
	margin-top: 5px;
}
.billing_status{
	margin-top: 0px;
}
.checkbox_btn_wrap label {
	display: block;
	padding: 4px 9px 3px 9px;
	border-radius: 12px;
	cursor: pointer;
	background-color: #EEE;
}
.checkbox_btn_wrap label:hover {
	background-color: #ddd;
}
.checkbox_btn_wrap input[type="checkbox"]:checked + label {
	background-color: #41b14e;
	color: #FFF;
}
.search_wrap .check_btn_area ul li {
	width: auto;
	margin-left: 20px;
	margin-bottom: 4px;
}
.search_wrap .check_btn_area ul li:last-child {

}

/* セレクト */
.select_wrap {
	position: relative;
	display: inline-block;
}
.select_wrap::before {
	position: absolute;
	right: 10px;
	top: 8px;
	z-index: 1;
	content: "";
	pointer-events: none;
	border-top: 10px solid #444;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 0 solid transparent;
}
.select_wrap select {
	padding-right: 25px;
}
.form_item > div .middle_size,
.form_item > div .number_size {
	width: 280px;
}
.form_item > div .short_size {
	width: 150px;
}
.form_item > div .veryshort_size {
	width: 50px;
}
.input_info{
	font-size: 12px;
	margin-top: 4px;
}
/* 検索用 */
.search_wrap{
	position: sticky;
	left: 30px;
	width: calc(100vw - 245px);
	padding-bottom: 20px;
}
.search_wrap.small_menu{
	left: 61px;
}
.search_wrap ul {
	padding-left: 1px;
}
.search_wrap ul li {
	width: 200px;
	float: left;
	margin-right: 20px;
}
.search_wrap li h3 {
	display: table-cell;
	padding-top: 5px;
	padding-bottom: 2px;
	vertical-align: bottom;
	font-size: 12px;
	color: #333;
}
.search_wrap input[type="text"],
.search_wrap input[type="date"],
.search_wrap select {
	border-radius: 0;
	font-size: 12px;
}
.search_wrap input[type="text"]{
	width: 85px;
}
.search_wrap .select_wrap {
	width: 100%;
}
.search_wrap .date_wrap > div {
}
.date_form {
	position: relative;
}
/*
.date_form::after {
	position: absolute;
	display: block;
	content: "\f073";
	font-family: 'tp-iconfont';
	font-size: 14px;
	font-weight: 400;
	color: #999;
	top: 12px;
	right: 8px;
}
*/
.search_btn {
	margin-top: 30px;
}
.search_btn button {
    min-width: 120px;
    padding: 0 20px;
    color: #FFF;
    font-size: 15px;
    background-color: #419db1;
}
.search_btn button:hover {
	background-color: #348a9c;
}
.check_area {
	margin-top: 30px;
}

/****************************/
/* アイコン機能					*/
/****************************/
/* List */
.car_list_wrap {
	display: none;
}

/****************************/
/* テーブル表示				*/
/****************************/
.show_table_wrap {
	margin-top: 0px;
}
/* 表示設定機能 */
.table_setting {
	margin-bottom: 2px;
}
.table_disp_set_wrap{
	position: relative;
	float: right;
	right: 5px;
	z-index: 10000;
}
.table_disp_set {
	position: absolute;
	bottom: -500px;
	right: 165px;
	z-index: 10000;
	min-width: 1420px;
	background-color: #FFF;
	box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
	border-bottom: 6px solid #419db1;
	border-radius: 3px;
	zoom: 0.9;
}
.table_disp_set h4{
	text-align: center;
	padding: 10px 8px 8px 8px;
	background-color: #419db1;
	color: #FFF;
	font-weight: bold;
	border-radius: 3px 3px 0 0;
}
.table_disp_set ul {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
}
.table_disp_set ul li {
	display: block;
	width: 20%;
	margin-bottom: 10px;
}
.table_disp_set ul li.hide {
	display: none;
}
.table_disp_set_con{
	padding: 12px 8px 12px 8px;
}
.table_disp_set_btn {
	height: 30px;
	padding: 1px 20px 0 20px;
	font-size: 12px;
	font-weight: bold;
	color: #888;
	background-color: #FFF;
	border-radius: 18px;
	border: 1px solid #aaa;
}
.table_disp_set_btn.active,
.table_disp_set_btn:hover {
	color: #fff;
	background-color: #419db1;
	border: 1px solid #419db1;
}
/*
.table_disp_set_btn.selected{
	color: #FFF;
	background-color: #419db1;
	border: 1px solid #419db1;
}
*/
.table_disp_set_btn.selected::after {
	position: absolute;
	top: -14px;
	right: 14px;
	display: block;
	content: "Changed";
	border-radius: 10px;
	background-color: #de0e0e;
	color: #fff;
	padding: 1px 8px 0px 8px;
	font-size: 11px;
	font-weight: normal;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.table_disp_set_btn i {
	font-size: 14px;
	vertical-align: middle;
	margin-right: 3px;
}
.table_disp_btn_area{
	text-align: center;
	margin-top: 10px;
}
.table_disp_btn_area button{
	min-width: 120px;
	padding: 0 20px;
	color: #FFF;
	font-size: 14px;
	background-color: #777;
}
.table_disp_btn_area button.submit{
	background-color: #419db1;
	margin-right: 20px;
}
.reset{
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 14px;
	cursor: pointer;
	color: #777;
}
.reset:hover{
	color: #419db1;
}
.reset i {
	margin-right: 5px;
	font-size: 13px;
	color: #419db1;
}


/* テーブル表示 */
.show_table {
	position: relative;
	display: inline-block;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.show_table_hd {
	display: none;
}
.show_table_wrap {
	display: inline-block;
}
.show_table_wrap table {
}
.show_table_wrap table th {
	box-sizing: border-box;
	padding: 12px 8px 11px 8px;
	background-color: #333;
	color: #FFF;
	font-size: 12px;
	text-align: left;
	line-height: 1.2;
	border-left: 1px solid #2b2b2b;
	position: -webkit-sticky;
	position: sticky;
	top: 40px;
	z-index:100;
}
.show_table_wrap table td {
	position: relative;
	box-sizing: border-box;
	height: 36px;
	padding: 3px;
	color: #333;
	font-size: 11px;
	vertical-align: middle;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	word-break: break-all;
}
.show_table_wrap table td:first-child,
.show_table_wrap table th:first-child {
	border-left: 0 none;
}
.show_table_wrap table td.td_btn,
.show_table_wrap table td.td_select,
.show_table_wrap table td.td_input,
.show_table_wrap table td.list_input,
.show_table_wrap table td.list_on_off,
.show_table_wrap table td.date_input {
	position: relative;
    padding: 3px;
}
/*
.show_table_wrap table td.list_input .display::before,
.show_table_wrap table td.date_input .display::before,
.show_table_wrap table td.list_on_off .display::before
{
    font-size: 14px;
    position: absolute;
    top: auto;
    right: 20px;
    font-family: 'tp-iconfont';
    content: "\f044";
    color: #ddd;
    display: block;
    height: 0px;
    width: 0px;
    margin-top: -2px;
}
.show_table_wrap table td.date_input .display::before{
    content: "\f073";
}
.show_table_wrap table td.list_on_off .display::before{
    content: "\f14a";
}
.show_table_wrap table td.list_input.right .display::before{
}
*/
.show_table_wrap table td.date_input .display{
	text-align: center;
}
.show_table_wrap table td.list_on_off{
	cursor: pointer;
}
.show_table_wrap table td input[type="text"] {
	font-size: 12px;
	padding: 1px 5px 1px 5px;
}
.show_table_wrap table th a {
	position: relative;
	display: block;
	padding-right: 15px;
	color: #fff;
	text-decoration: none;
}
.show_table_wrap table th a::after {
	position: absolute;
	top: 2px;
	right: 0;
	display: block;
	content: "";
	border-top: 0px solid transparent;
	border-bottom: 9px solid #404040;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
a.sort_asc::after {
	position: absolute;
	top: 9px;
	right: 8px;
	display: block;
	content: "";
	border-top: 0px solid transparent;
	border-bottom: 9px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
a.sort_desc::after {
	position: absolute;
	top: 9px;
	right: 8px;
	display: block;
	content: "";
	border-top: 9px solid #fff;
	border-bottom: 0px solid transparent;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
.show_table_wrap tr:nth-child(odd) td {
    background-color: #fff;
}
.show_table_wrap tr:nth-child(even) td {
    background-color: #f1f1f1;
}
.show_table_wrap .filter_hide{
	display: none;
}
.show_table_wrap table button {
    box-sizing: border-box;
    padding: 0 8px;
    height: 30px;
    background-color: #999;
    color: #EEE;
    font-size: 12px;
    cursor: pointer;
}
.show_table_wrap table button.disabled{
	border: 1px solid #e0e0e0;
    background-color: transparent;
    color: #e0e0e0;
    cursor: default;
}
.main_contents .show_table_wrap table tr:hover td,
.main_contents .show_table_wrap table tr.active td{
	background-color: #90daea;
}
.main_contents .show_table_wrap table tr.active{
	outline: 1px solid #CCC;
}
.show_table input,
.show_table select {
	height: 30px;
}
.show_table_wrap table th .sub_text {
	display:block;
	color: #999;
	font-size: 10px;
}

/****************************/
/* アイコン表示					*/
/****************************/
.icon_list_wrap{
	display: none;
}
.icon_list_wrap ul{
	display: table;
	float: right;
}
.icon_list_wrap ul li{
	display: table-cell;
	padding: 6px 7px;
}
.icon_list_wrap ul li i{
	font-size: 40px;
	color: #444;
}

/****************************/
/* ダイアログ用					*/
/****************************/
/* common */
.dialog_box_wrap{
	position: absolute;
	box-sizing: border-box;
	display: inline-block;
	top: 164px;
	left: 0;
	z-index: 20000;
}
.dialog_box_wrap{
	background-color: #FFF;
}
/* back screen */
.dialog_back_screen{
	position: fixed;
	top: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 19999;
	text-align: center;
}
/* close btn */
.dialog_close{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 25px;
	cursor: pointer;
}
.dialog_close::before{
	position: absolute;
	top: 0px;
	right: 11px;
	content: "";
	display: block;
	height: 26px;
	width: 3px;
	background-color: #aaa;
	transform: rotate(-45deg);
	transition: all .3s;
}
.dialog_close::after{
	position: absolute;
	top: 0px;
	right: 11px;
	content: "";
	display: block;
	height: 26px;
	width: 3px;
	background-color: #aaa;
	transform: rotate(45deg);
	transition: all .3s;
}
/****************************/
/* フィルタ用背景				*/
/****************************/
.back_screen{
	position: fixed;
	top: 0px;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	text-align: center;
	line-height: 100vh;
	font-size: 26px;
	background-color: rgba(0,0,0,0.7);
}
.transparent_fillter{
	background-color: transparent;
}
.black_fillter{
	background-color: rgba(0,0,0,0.7);
}
.right_filter{
	background-color: rgba(0,0,0,0.3);
}
.opacity_fillter{
	opacity: 0;
}
.opacity_fillter_off{
	opacity: 1;
}

/****************************/
/* ページャー					*/
/****************************/
.pager_wrap{
	margin-bottom: 4px;
	min-width: 300px;
}
.pager_number {
	float: left;
}
.display_result {
	float: right;
	padding-top: 16px;
	padding-right: 15px;
}
.display_limit {
	position: relative;
	float: right;
	padding-top: 5px;
	padding-right: 5px;
}
.pager_list {
	display: -webkit-flex;
	display: flex;
}
.pager_list > div {
	margin-right: 3px;
}
.pager_number a {
	display: block;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	padding-top: 8px;
	text-align: center;
	text-decoration: none;
	color: #444;
}
.pager_list > div.listNavi1 a:not(.disabled_arrow):hover,
.pager_list > div.listNavi2 a:not(.disabled_arrow):hover,
.pager_list > div.listNavi3 a:hover,
.pager_list > div.listNavi4 a:not(.disabled_arrow):hover,
.pager_list > div.listNavi5 a:not(.disabled_arrow):hover {
	background-color: #aaa;
	border-radius: 3px;
	color: #FFF;
}
.pager_list > div.listNavi1 a:not(.disabled_arrow):hover span:before,
.pager_list > div.listNavi1 a:not(.disabled_arrow):hover span:after,
.pager_list > div.listNavi2 a:not(.disabled_arrow):hover span:before,
.pager_list > div.listNavi4 a:not(.disabled_arrow):hover span:before,
.pager_list > div.listNavi5 a:not(.disabled_arrow):hover span:before,
.pager_list > div.listNavi5 a:not(.disabled_arrow):hover span:after {
	border-color: #FFF;
}
.listNaviOnpage a{
	background-color: #fff;
	border-radius: 3px;
	border: 1px solid #aaa;
	color: #333;
}

/* 矢印設定 */
span.top_arrow,
span.prev_arrow,
span.next_arrow,
span.last_arrow {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}
span.top_arrow:before {
	position: absolute;
	top: 4px;
	right: 4px;
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	transform: rotate(-45deg);

}
span.top_arrow:after {
	position: absolute;
	top: 4px;
	right: -2px;
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	transform: rotate(-45deg);

}
span.prev_arrow:before {
	position: absolute;
	top: 4px;
	right: 2px;
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-left: 1px solid #333;
	border-top: 1px solid #333;
	transform: rotate(-45deg);
}
span.next_arrow:before {
	position: absolute;
	top: 4px;
	right: 4px;
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(-45deg);
}
span.last_arrow:before {
	position: absolute;
	top: 4px;
	right: 6px;
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(-45deg);

}
span.last_arrow:after {
	position: absolute;
	top: 4px;
	right: 0px;
	content: "";
	display: block;
	width: 4px;
	height: 4px;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
	transform: rotate(-45deg);

}
.disabled_arrow {
	cursor:default;
}
.disabled_arrow span:before,
.disabled_arrow span:after {
	border-color: #aaa;
}

/****************************/
/* ヘッダー					*/
/****************************/
.header_wrap {
	position: fixed;
	z-index: 2000;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 4px 15px;
	background-color: #002046;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.6);
}
.header_menu_icon{
	display: none;
	float: left;
	padding: 6px 15px 0 0;
	font-size: 30px;
	color: #333;
}
.header_left {
	float: left;
}
.header_left h1 {
	margin-top: 14px;
	font-size: 18px;
	color: #333;
}
.header_left h1 a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
.header_right{
	float: right;
}
.header_right > div{
	float: left;
}
.header_right .account_menu{
	text-align: right;
}
.header_right .account_menu div{
	display: inline-block;
}
.header_right .account{
	color: #fff;
	margin-right: 10px;
}
.header_right .logout{
	margin-left: 10px;
}
.header_right .account_button button{
	padding: 1px 20px 0 20px;
	color: #FFF;
	font-size: 12px;
	background-color: #0F9ED5;
	margin-top: 5px;
	height: 30px;
}
.header_right .account_button button:hover{
	background-color: #076a90;
}
.header_right .logout button{
	padding: 1px 20px 0 20px;
	color: #FFF;
	font-size: 12px;
	background-color: #dd5656;
	margin-top: 5px;
	height: 30px;
}
.header_right .logout button:hover{
	background-color: #712f2f;
}

/****************************/
/* フッター						*/
/****************************/


/****************************/
/* メニュー						*/
/****************************/
.menu_wrap {
	width: 165px;
	min-width: 165px;
	background-color: #fff;
	padding: 12px 0;
	color: #ccc;
	font-size: 14px;
	border-right: 1px solid #ccc;
}
.menu_wrap li > div {
	color: #ccc;
	cursor: pointer;
}
.menu_wrap li.active > div.menu_item {
	position: relative;
	background-color: #ccc;
	color: #333;
	cursor: inherit;
}
.menu_wrap li.active > div.menu_item:after {
	position: absolute;
	right: 0;
	top: 1px;
	content: "";
	display: block;
	border-right: 19px solid #fff;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	background-color: #ccc;
}
.menu_wrap li.active .sub_menu {
	display: block;
}
.menu_wrap li a {
	color: #ccc;
	text-decoration: none;
}
.menu_wrap li:not(.active) div.menu_item:hover{
	color: #333;
}
.menu_item {
	box-sizing: border-box;
	padding: 9px 12px 0 14px;
	height: 34px;
}
.menu_item.sub {
	height: 30px;
	padding-top: 6px;
	border-bottom: 1px dashed #3e3e3e;
}
.menu_item.sub_long {
	height: 40px;
	padding-top: 4px;
	border-bottom: 1px dashed #3e3e3e;
}
.menu_item > div {
	float: left;
}
.menu_item > div.menu_icon {
	width: 20px;
	font-size: 16px;
	margin-right: 6px;
	text-align: center;
}
.menu_item > div.menu_text {
	padding-top: 2px;
}
.main {
	height: calc(100vh - 64px);
}
.main div.menu_wrap_show {
	width: 165px;
	min-width: 165px;
	display: table-cell;
}
.main div.menu_wrap_show .menu_item > div.menu_text {
	display: block;
}
ul.main_menu_list > li{
	position: relative;
}
ul.main_menu_list > li:not(.active):hover .sub_menu {
	position: absolute;
	top: 0;
	right: -165px;
	z-index: 1;
	display: block;
	width: 165px;
}
div.menu{
	position: sticky;
	top: 52px;
	z-index:5000;
}
.sub_menu {
	background-color: #444444;
}
.sub_menu:after,
.menu_wrap_show .sub_menu:after {
	position: absolute;
	left: -12px;
	top: 8px;
	content: "";
	display: block;
	border-right: 12px solid #444444;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}
.menu_wrap .sub_menu li a{
	color: #777;
}
.menu_wrap .sub_menu li.sub_active div{
	color: #fff;
}
.main_menu_title {
	display: none;
}


.menu_wrap.small_menu {
	width: 31px;
	min-width: 31px;
	position: sticky;
	left: 0px;
	z-index: 500;
}
.menu_wrap.small_menu .menu_item{
	padding: 8px 5px;
}
.menu_wrap.small_menu .menu_item > div.menu_icon{
	margin-right: 0px;
}
.menu_wrap.small_menu .menu_item > div.menu_text {
	display: none;
}
.menu_wrap.small_menu li.active > div.menu_item:after {
	top: 13px;
	border-right: 6px solid #f3f3f3;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;	
}
.menu_wrap.small_menu li.active .sub_menu {
	display: none;
}
.menu_wrap.small_menu ul.main_menu_list > li:hover .sub_menu {
	position: absolute;
	top: 0;
	right: -165px;
	left: auto;
	z-index: 1;
	display: block;
	width: 165px;
}
.menu_wrap.small_menu .sub_menu .menu_item > div.menu_text{
	display: block;
}
.menu_wrap.small_menu .main_menu_title {
	display: block;
}
.menu_wrap.small_menu .main_menu_title {
	background-color: #dd5656;
	color: #fff;
	cursor: inherit;
}
.menu_wrap.small_menu .sub_menu:after {
	border-right: 12px solid #dd5656;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}
.menu_wrap.small_menu .main_menu_title .menu_item,
.menu_wrap.small_menu li .main_menu_title div.menu_item:hover{
	color: #FFF;
	cursor: default;
}
.menu_wrap .menu_close{
	position: absolute;
	right: 0px;
	width: 30px;
	height: 30px;
	margin-top: 70px;
	border-radius: 5px 0px 0px 5px;
	border-top: 1px solid #DDD;
	border-left: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	text-align: center;
	cursor: pointer;
	background-color: #555;
}
.menu_wrap .menu_close:hover{
	background-color: #888;
}
.menu_wrap .menu_close:before{
	position: absolute;
	right: 9px;
	top: 6px;
	content: "";
	display: block;
	border-right: 12px solid #f3f3f3;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-left: 0px solid transparent;
}
.menu_wrap.small_menu .menu_close:before{
	position: absolute;
	right: 8px;
	top: 6px;
	content: "";
	display: block;
	border-left: 12px solid #f3f3f3;
	border-right: 0px solid transparent;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
}

/****************************/
/* コンテンツ					*/
/****************************/
.main{
	display: table;
	width: 100%;
	min-height: 100%;
}
.main > div{
	display: table-cell;
	vertical-align: top;
}
.main_contents_wrap {
	box-sizing: border-box;
	padding: 10px 30px 100px 30px;
}
.flat_contents_wrap {
	box-sizing: border-box;
	padding: 40px 20px 100px 20px;
}
.main_contents{
	margin-top: 0px;
}
h2.contents_title{
	width: calc(100vw - 245px);
	position: sticky;
	left: 30px;
	font-size: 28px;
	font-weight: bold;
}
h2.contents_title.small_menu{
	position: sticky;
	left: 61px;
}
h2.contents_title i{
	margin-right: 10px;
}
h2.contents_title span{
	font-weight: normal;
	color: #333;
}
.content_description{
	font-size: 24px;
	margin-top: 18px;
	margin-bottom: 30px;
	font-weight: bold;
}
/* スマホ対応 */
@media screen and (max-width: 480px) { 
	.main_contents_wrap {
		max-width: calc(100vw - 165px - 20px);
		padding: 20px 10px 100px 10px;
		overflow: hidden;
	}
	.flat_contents_wrap {
		padding: 20px 10px 100px 10px;
	}
	.main_contents_wrap > div{
		width: calc(100vw - 20px);
	}
}

/****************************/
/* カレンダー上書き			*/
/****************************/
.ui-datepicker{
	padding: 5px;
}
.ui-datepicker-close, .ui-datepicker-next {
	cursor: pointer;
	float: right;
	width: 32%;
	text-align: right;
}
.ui-datepicker-rtl .ui-datepicker-close, .ui-datepicker-rtl .ui-datepicker-next {
	float: left;
	text-align: left;
}
.ui-datepicker-clear, .ui-datepicker-prev {
	cursor: pointer;
	float: left;
	width: 34%;
	text-align: right;
}
.ui-datepicker-rtl .ui-datepicker-clear, .ui-datepicker-rtl .ui-datepicker-prev {
	float: right;
	text-align: right;
}
.ui-datepicker-current {
	float: left;
	width: 30%;
	text-align: center;
}
a.ui-state-hover{
	border: 3px solid #ccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b
}

/****************************/
/* JAlert					*/
/****************************/
.dialog_ok {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: 30px;
	outline: none;
	border: 0 none;
	border-radius: 3px;
	cursor: pointer;
	min-width: 70px;
	padding: 4px 20px;
	color: #FFF;
	font-size: 12px;
	background-color: #419db1;
}
.dialog_cancel {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	height: 30px;
	outline: none;
	border: 0 none;
	border-radius: 3px;
	cursor: pointer;
	min-width: 70px;
	padding: 4px 16px;
	color: #FFF;
	font-size: 12px;
	background-color: #b14141;
}
#popup_container {
	font-family: Arial, sans-serif;
	font-size: 12px;
	min-width: 300px;
	max-width: 1000px;
	background-color: #FFF;
	color: #000;
}
#popup_title {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
	color: #666;
	background-color: #FFF;
	border: solid 1px #FFF;
	border-bottom: solid 1px #EEE;
	cursor: default;
	padding: 9px 18px 8px 18px;
	margin: 0em;
}
#popup_content {
	background: #FFF 16px 16px no-repeat;
	padding: 15px 18px 15px 18px;
	margin: 0em;
}
#popup_message {
	position: relative;
	padding:3px 0 28px 48px;
	max-height: 500px;
	min-width: 30px;
	overflow-y: auto;
	font-size: 13px;
}
#popup_message:before {
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	font-family: 'tp-iconfont';
	font-size: 38px;
	font-weight: bold;
	color: #999;
}
#popup_content #popup_message:before,
#popup_content.info #popup_message:before,
#popup_content.alert #popup_message:before {
	content: "\f05a";
	color: #427edc;
}
#popup_content.error #popup_message:before {
	content: "\f071";
	color: #dc4242;
}
#popup_content.confirm #popup_message:before {
	content: "\f059";
	color: #427edc;
}
#popup_content.prompt #popup_message:before {
	content: "";
}
#popup_panel {
	text-align: center;
	margin: 20px 0px 0px 0px;
}

#popup_ok {
	min-width: 90px;
	margin-right:5px;
}
#popup_cancel {
	min-width: 90px;
	margin-left:5px;
}

#popup_prompt {
	margin: .5em 0em;
}

/****************************/
/* 認証待ち					*/
/****************************/
div.approval_pending_badge{
	position: absolute;
	box-sizing: border-box;
	padding: 5px 2px 0px 2px;
	display: inline-block;
	background-color: #b52c2c;
	border-radius: 100%;
	font-size: 10px;
	min-width: 19px;
	height: 19px;
	text-align: center;
	margin-top: -2px;
	margin-left: 6px;
	cursor: pointer;
}
div.approval_pending_badge.small_menu{
	zoom: 0.8;
	margin-top: -14px;
	margin-left: -19px;
}
div.approval_pending_badge a{
	color: #FFF;
}
div.approval_pending_badge:hover{
	background-color: #bb0303;
}