/*
 ─────────────────────────────
         Copyright(C) 2021 CMT All Rights Reserved.
 ─────────────────────────────
*/
/* ----- body ------------------------------------------- */
html,body{
	width            :100%;
	height           :100%;
	margin           :0px;
	padding          :0px;
	font-family      :メイリオ,Arial,Helvetica,sans-serif;
	font-size        :10pt;
	color            :#222;
	background       :#ffe;
}

div.main{
	padding          :10px;
}

div.break       {page-break-before:always;}
div.break_after {page-break-after:always;}

/* ----- FLIE COMMENT ----- */
div.file_comment_icon{
	margin           :0px 0px 2px 0px;
	padding          :3px 0px 1px 0px;
	width            :130px;
	font-size        :9pt;
	text-align       :center;
	color            :#fff;
	background       :#a96;
	border-radius    :9px;
}

/* ------------------------ */
div.url_copy{
	margin           :0px 0px 0px 7px;
	padding          :2px 20px 2px 20px;
	color            :#fff;
	background       :linear-gradient(#777, #000);
	border-radius    :5px 5px 0px 0px;
}

div.url_copy:hover{
	cursor           :pointer;
	color            :#fff;
	background       :linear-gradient(#555, #bbb);
}

/* ------------------------ */
div.file_comment{
	word-break       :break-all;
	padding          :7px;
	border           :0.5px #080 solid;
	background       :#f6fff6;
	border-radius    :0px 9px 9px 9px;
}

/* ----- image ----- */
img{
	border           :none;
	vertical-align   :bottom;
}

/* ----- iframe ----- */
iframe{
	border           :none;
	display          :block;
	width : 100%;
	height: 100%;

}

a:hover img{
	opacity          :0.4;
}

/* ----- 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            :#88f;
	text-decoration  :underline dotted #88f;
}

/* ----- INPUT TYPE  ----- */
input[type='text']{
	padding          :4px;
	font-size        :14px;
	color            :#000;
	background       :#fff;
	width            :calc(100% - 10px);
	border           :1px #aaa solid;
	border-radius    :5px;
}

input[type='text']:focus{
	background       :#ffc;
	border           :1px #888 solid;
}

input[type='password']{
	padding          :2px;
	font-size        :20px;
	background       :#ffe;
	border           :1px #bbb solid;
	border-radius    :5px;
}

input[type='password']:focus{
	background       :#ffd;
	border           :1px #888 solid;
}

input[type='file']{
	padding          :0px;
    width            :100%;
    height           :100%;
    opacity          :0.6;
}

/* ------------------------ */
input[type='radio']{
	width            :18px;
	height           :18px;
}

input[type='image']{
	border           :none;
	vertical-align   :bottom;
}

input[type='image']:hover{
	opacity          :0.6;
	filter           :alpha(opacity=60);
}

/* ----- TEXTAREA ----- */
textarea{
	font-family      :メイリオ,Arial,Helvetica,sans-serif;
	padding          :4px;
	width            :calc(100% - 10px);
	height           :60px;

	border           :1px #aaa solid;
	background       :#ffe;
	border-radius    :5px;
}

textarea:focus{
	background       :#ffc;
	border           :1px #888 solid;
}

/* ----- SELECT ----- */
select{
	padding          :5px;
	font-size        :12pt;
	border           :1px #bbb solid;
	background       :#ffe;
	border-radius    :5px;
}

select:focus{
	background-color :#ffc;
}

/* ----- table form_view ----- */
table.form_view{
	border-collapse  :separate;
	border-spacing   :1px;
}

table.form_view th{
	text-align       :center;
	font-weight      :normal;
	font-size        :9pt;
	background       :#888;
	color            :#fff;
	border-radius    :11px;
}

table.form_view td{
	font-size        :9pt;
	color            :#444;
}

/* ----- table inform ----- */
table.inform{
	border-collapse  :separate;
	border-spacing   :2px;
	width            :100%;
}

table.inform th{
	color            :#fff;
	background       :#997;
	padding          :2px 5px 2px 5px;
	width            :110px;
	text-align       :right;
	font-size        :9pt;
	font-weight      :normal;
	white-space      :nowrap;
	border-radius    :5px;
}

table.inform td{
	width            :100%;
}

/* ------------------------ */
table.note1{
	border-collapse  :separate;
	border-spacing   :2px;
}

table.note1 th{
	white-space      :nowrap;
	padding          :2px 7px 1px 7px;
	font-weight      :normal;
	color            :#fff;
	background       :linear-gradient(#aaa, #888);
	border-radius    :7px;
}

table.note1 td{
	padding          :2px;
	vertical-align   :top;
}

/* ------------------------ */
table.note2{
	border-collapse  :collapse;
}

table.note2 th{
	white-space      :nowrap;
	padding          :2px 7px 1px 7px;
	font-weight      :normal;
	color            :#fff;
	background       :linear-gradient(#bbb, #888);
	border-radius    :20px;
}

table.note2 td{
	padding          :1px;
	vertical-align   :top;
	border-bottom    :0.5px #ccc solid;
	font-size        :9pt;
}

/* ------------------------ */
div.drop_area{
	position         :relative;
	padding          :2px;
	width            :calc(100% - 6px);
	height           :200px;
	background       :linear-gradient(#fb5, #feb);
	border           :0.5px #886 solid;
}

/* ------------------------ */
div.submit_button{
	padding          :4px;
	font-size        :12pt;
	text-align       :center;
	border           :1px solid #bbb;
	background       :linear-gradient(#bbb, #444);
	color            :#fff;
	box-shadow       :2px 2px 3px rgba(0, 0, 0, 0.2);
	border-radius    :5px;
}

div.submit_button:hover{
	cursor           :pointer;
	border           :1px solid #999;
	background-image :linear-gradient(#222, #444);
}

/* ------------------------ */
div.logout{
	display          :flex;
	align-items      :center;
	justify-content  :center;
	position         :absolute;
	top              :7px;
	right            :7px;
	width            :100px;
	height           :26px;
	font-size        :10pt;
	background       :linear-gradient(#eee, #bbb);
	color            :#000;
	box-shadow       :2px 2px 3px rgba(0, 0, 0, 0.2);
	border-radius    :5px;
}

div.logout:hover{
	cursor           :pointer;
	color            :#f00;
	background       :linear-gradient(#000, #555);
	box-shadow       :none;
}


/* ------------------------ */
div.comment_view_header{
	padding          :2px 5px 0px 8px;
	color            :#fff;
	background       :#aa7;
	border-radius    :5px 5px 0px 0px;
}

div.comment_view{
	padding          :0px;
	background       :#ffe;
	border           :0.5px #aa7 solid;
	border-radius    :5px;
}
/* ------------------------ */

/* ------------------------ */
div.help_button{
	position         :fixed;
	top              :37px;
	padding          :3px;
	width            :80px;
	right            :3px;
	font-size        :16px;
	text-align       :center;
	color            :#fff;
	background       :linear-gradient(#0c0, #070);
	border-radius    :5px;
}

div.help_button:hover{
	cursor           :pointer;
	background       :linear-gradient(#070, #030);
}

/* ------------------------ */
div.help_comment{
	padding          :5px;
	background       :#ffd;
	border           :0.5px #886 solid;
	border-radius    :5px;
}

/* ------------------------ */
div.edit_button{
	padding          :7px;
	width            :200px;
	text-align       :center;
	border           :1px #888 solid;
	color            :#000;
	background       :linear-gradient(#fff, #ddd);
	border-radius    :5px;
	cursor           :pointer;
}

div.edit_button:hover{
	color            :#fff;
	background       :linear-gradient(#999, #bbb);
}

/* ------------------------ */
div.edit_button2{
	margin           :5px 5px 0px 5px;
	padding          :3px 12px 3px 12px;
	color            :#fff;
	background       :linear-gradient(#777, #000);
	border-radius    :5px;
	cursor           :pointer;
}

div.edit_button2:hover{
	color            :#fff;
	background       :linear-gradient(#555, #bbb);
}

/* ------------------------ */
div.admin_title_box1{
	margin           :3px;
	width            :97%;
	padding          :4px 1px 4px 10px;
	font-size        :11pt;
	background       :linear-gradient(#8cf, #036);
	color            :#fff;
	border-radius    :5px;
}

/* ------------------------ */
div.admin_title_box2{
	margin           :3px;
	width            :97%;
	padding          :4px 1px 4px 10px;
	font-size        :11pt;
	background       :linear-gradient(#fc8, #630);
	color            :#fff;
	border-radius    :5px;
}

/* ------------------------ */
div.admin_menu_box1{
	margin           :3px;
	width            :97%;
	padding          :4px;
	font-size        :11pt;
	color            :#000;
	background       :#def;
	border           :0.5px #08f solid;
	border-radius    :3px;
}

div.admin_menu_box1:hover{
	cursor           :pointer;
	background       :#9cf;
}

/* ------------------------ */
div.admin_menu_box2{
	margin           :3px;
	width            :97%;
	padding          :4px;
	font-size        :11pt;
	color            :#000;
	background       :#fed;
	border           :0.5px #f80 solid;
	border-radius    :3px;
}

div.admin_menu_box2:hover{
	cursor           :pointer;
	background       :#fc9;
}

/* ------------------------ */
div.top_menu_title{
	margin           :0px 18px 0px 0px;
	padding          :3px 18px 3px 18px;
	color            :#fff;
	background       :linear-gradient(#8cf, #036);
	border-radius    :12px;
}

/* ------------------------ */
div.ym_shift_button{
	color            :#fff;
	background       :linear-gradient(#777, #bbb);
	padding          :2px 12px 0px 12px;
	margin           :0px 1px 0px 0px;
	border-radius    :12px;

}

div.ym_shift_button:hover{
	cursor           :pointer;
	color            :#fff;
	background       :linear-gradient(#06b, #048);
}

@media screen and (max-width:640px){
	input[type='text']{
		width        :calc(100% - 10px);
	}

	textarea{
		width        :calc(100% - 10px);
	}
}