/*
 ────────────────────────
       Copyright(C) CMT LLC. All Rights Reserved.
 ────────────────────────
*/
/* ----- body ----- */
html,body{
	width            :100%;
	height           :100%;
	margin           :0px;
	padding          :0px;
	font-family      :"メイリオ","Meiryo","游ゴシック Medium","Yu Gothic Medium","游ゴシック体",sans-serif;
	font-size        :11pt;
	color            :#000;
	background       :#fff;
}

.top_title{
	float            :left;
	padding          :2px 0px 0px 12px;
	color            :#fff;
	font-size        :22px;
	font-weight      :800;
	letter-spacing   :1px;
	text-shadow      :2px 2px 2px rgba(0,0,0,0.8);
}

/* ----- portal_menu_box ----- */
div.portal_menu_box{
	float            :left;
	margin           :3px 7px 4px 0px;
	font-size        :12px;
	line-height      :20px;
	width            :250px;
	height           :250px;
	padding          :4px;
	background       :linear-gradient(135deg,#ffe, #ffb);
	border           :0.5px #990 solid;
	border-radius    :8px;
	cursor           :pointer;
	transition       :0.3s;
}

div.portal_menu_box:hover{
	color            :#fff;
	background       :linear-gradient(135deg,#08f, #05a);
	border           :0.5px #008 solid;
	transition       :0.3s;
}

/* ----- portal_logout_box ----- */
div.portal_logout_box{
	float            :right;
	width            :100px;
	height           :36px;
	line-height      :36px;
	text-align       :center;
	font-size        :14px;
	font-weight      :bold;
	color            :#ccc;
	background       :linear-gradient(#999, #444);
	cursor           :pointer;
}

div.portal_logout_box:hover{
	color            :#fff;
	background       :linear-gradient(#444, #777);
}

div.main{
	padding          :10px;
}

div.break       {page-break-before:always;}
div.break_after {page-break-after:always;}


/* ----- iframe ----- */
iframe{
	border           :none;
	display          :block;
	width            :100%;
	height           :100%;
}

/* ----- pre ----- */
pre{
	font-family      :"Arial","Meiryo",sans-serif;
}

/* ----- image ----- */
img{
	border           :none;
	vertical-align   :bottom;
	border-radius    :3px;
}

/* ----- A LINK ----- */
a:link{
	color            :#00f;
	text-decoration  :none;
}

a:active{
	color            :#00f;
	text-decoration  :none;
}

a:visited{
	color            :#00f;
	text-decoration  :none;
}

a:hover{
	color            :#fff;
	background       :linear-gradient(#08f, #04b);
	border-radius    :3px;
}

a:hover img{
	opacity          :0.7;
//	background       :#fff;
	filter           :alpha(opacity=70);
}

/* ----- INPUT TYPE TEXT ----- */
input[type='text']{
	padding          :2px 5px 2px 5px;
	width            :390px;
	height           :25px;
	font-size        :16px;
	color            :#000;
	background       :#ffe;
	border           :0.5px #bbb solid;
	border-radius    :5px;
}

input[type='text']:focus{
	background       :#ffc;
	border           :0.5px #888 solid;
}

/* ----- INPUT TYPE PASSWORD ----- */
input[type='password']{
	padding          :2px 5px 2px 5px;
	font-size        :16px;
	height           :25px;
	color            :#000;
	background       :#ffe;
	border           :0.5px #bbb solid;
	border-radius    :5px;
}

input[type='password']:focus{
	background       :#ffd;
	border           :0.5px #888 solid;
}

/* ----- TEXTAREA ----- */
textarea{
	font-family      :メイリオ,Arial,Helvetica,sans-serif;
	padding          :5px;
	border           :0.5px #bbb solid;
	background       :#ffe;
	border-radius    :5px;
}

textarea:focus{
	background       :#ffc;
	border           :0.5px #888 solid;
}

/* ----- SELECT ----- */
select{
	padding          :5px;
	font-size        :12pt;
	border           :0.5px #bbb solid;
	background       :#ffe;
	border-radius    :5px;
}

select:focus{
	background-color :#ffc;
}

/* ----- INPUT TYPE FILE ----- */
input[type='file']{
	padding          :0px;
}

/* ----- INPUT TYPE RADIO ----- */
input[type='radio']{
	width            :18px;
	height           :18px;
}

/* ----- INPUT TYPE IMAGE ----- */
input[type='image']{
	border           :none;
	vertical-align   :bottom;
}

input[type='image']:hover{
	opacity          :0.6;
	filter           :alpha(opacity=60);
}

/* ----- pw_view ----- */
.pw_view{
	font-size        :10pt;
	cursor           :pointer;
}

.pw_view:hover{
	color            :#c00;
}


/* ----- rtip_pointer ----- */
div.rtip_pointer{
	position         :relative; 
	margin           :0px 1px 1px 0px;
	width            :7px;
	height           :7px;
	background       :#eee;
}

div.rtip_pointer:hover .balloon{
	z-index          :999;
	display          :inline;
	cursor           :pointer;
	background       :#9cf;
}

/* ----- cb_click ----- */
.cb_click{
	padding          :6px 9px 9px 0px;
}

.cb_click:hover{
	cursor           :pointer;
	background       :#dfd;
}

/* ----- graph_bar ----- */
.graph_bar{
	margin           :0px 3px 0px 0px;
	height           :18px;
	border-radius    :0px 3px 3px 0px;
	background       :linear-gradient(#08f, #04b);
}

/* ------------------------ */
div.edit_button{
	margin           :0px 3px 3px 0px;
	padding          :3px 9px 3px 9px;
	background       :linear-gradient(#bbb, #777);
	color            :#fff;
	box-shadow       :2px 2px 3px rgba(0,0,0,0.1);
	border-radius    :5px;
}

div.edit_button:hover{
	cursor           :pointer;
	background       :linear-gradient(#555, #777);
}

/* ----- check_button ----- */
div.check_button{
	width            :80px;
	padding          :3px;
	text-align       :center;
	border           :0.5px #888 solid;
	background       :linear-gradient(#fff, #bbb);
	border-radius    :5px;
	cursor           :pointer;
}

div.check_button:hover{
	color            :#fff;
	background       :linear-gradient(#888, #ccc);
}

/* ----- list_title_header ----- */
div.list_title_header{
	float            :left;
	text-align       :center;
	background       :#888;
	color            :#fff;
	border-radius    :11px;
}

div.list_title_header_end{
	clear            :both;
}

/* ----- ORDER LIST VIEW ----- */
img.pv1{
	width            :100px;
	border           :0.5px #ddd solid;
}

img.pv2{
	width            :100px;
	border-radius    :5px;
}


/* ----- footer ----- */
div.footer{
	position         :fixed;
	color            :#999;
	font-size        :11px;
	bottom           :5px;
	right            :7px;
	text-align       :right;
}

/* ----- submit_button ----- */
div.submit_button{
	width            :260px;
	padding          :7px;
	font-size        :13pt;
	text-align       :center;
	margin           :1px;
	background       :linear-gradient(#999, #777);
	color            :#fff;
	box-shadow       :2px 2px 4px rgba(0,0,0,0.2);
	border-radius    :7px;
	cursor           :pointer;
}

div.submit_button:hover{
	background       :#222;
}

/* ------------------------ */
div.login_panel{
	width            :290px;
	height           :170px;
	border           :0.5px #666 solid;
	background       :linear-gradient(135deg,#eee,#ccc);
	//opacity          :0.9;
	border-radius    :12px;
}

/* ------------------------ */
div.login_button{
	width            :130px;
	padding          :13px;
	border           :0.5px #f60 solid;
	background       :linear-gradient(#fed, #fa4);
	font-size        :18px;
	text-align       :center;
	border-radius    :5px;
	cursor           :pointer;
}

div.login_button:hover{
	color            :#fff;
	background       :linear-gradient(#f60, #fa4);
}

/* ------------------------ */
div.logout{
	position         :absolute;
	top              :35px;
	right            :0px;
	margin           :0px;
	width            :88px;
	height           :35px;
	line-height      :35px;
	font-size        :13px;
	text-align       :center;
	background       :linear-gradient(#eee, #bbb);
}

div.logout:hover{
	cursor           :pointer;
	color            :#fff;
	background       :linear-gradient(#777, #ccc);
}

/* ------------------------ */
div.comment_view{
	padding          :0px;
	background       :#ffe;
	border           :0.5px #aa7 solid;
	border-radius    :7px;
	opacity          :0.8;
}

/* ------------------------ */
div.comment_view_header{
	padding          :5px 5px 3px 5px;
	font-size        :17px;
	color            :#fff;
	background       :#aa7;
	border-radius    :7px 7px 0px 0px;
}

/* ------------------------ */
div.help_comment{
	padding          :3px 10px 2px 10px;
	background       :#ffe;
	border           :0.5px #bb8 solid;
	border-radius    :5px;
}


/* ------------------------ */

@media screen and (max-width:700px) {
	#tree{
		float        :left;
		width        :160px;
		height       :calc(100% - 70px);
	}

	#main{
		float        :left;
		width        :calc(100% - 160px);
		height       :calc(100% - 70px);
	}
}

@media screen and (min-width:1400px) {
	#tree{
		float        :left;
		width        :360px;
		height       :calc(100% - 70px);
	}

	#main{
		float        :left;
		width        :calc(100% - 360px);
		height       :calc(100% - 70px);
	}
}

@media screen and (min-width:2000px) {
	#tree{
		float        :left;
		width        :440px;
		height       :calc(100% - 70px);
	}

	#main{
		float        :left;
		width        :calc(100% - 440px);
		height       :calc(100% - 70px);
	}
}
