/*
 ─────────────────────────
 *タイトル：CMT謹製ブログシステム
 *機能名称：CSS
 *作成者名：CMT
 *作成開始：2025.12.09
 *更新履歴：

 *機能説明：

         Copyright(C) CMT LLC. All Rights Reserved.
 ─────────────────────────
*/

/* ----- body ----- */
html,body{
	width            :100%;
	height           :100%;
	margin           :0px;
	padding          :0px;
	font-family      :"Meiryo",sans-serif;
	font-size        :15px;
	line-height      :1.8;
	color            :#333;
	background       :#fff;
}

#tree{
	float            :left;
	width            :240px;
	height           :calc(100% - 30px);
}

#main{
	float            :left;
	width            :calc(100% - 240px);
	height           :calc(100% - 30px);
}

.editor{
	width            :635px;
	padding          :9px;
	color            :#fff;
	background       :#444;
	border           :3px #999 solid;
	font-family      :monospace;
	line-height      :120%;
}

/* ------------------------ */
.main{
	padding          :10px;
}

.bottom{
	position         :absolute;
	bottom           :10px;
	right            :10px;
	font-size        :11px;
	color            :#888;
}

/* ------------------------ */
.illust{
	width            :658px;
}

/* ------------------------ */
.video{
	width            :658px;
	border-radius    :5px;
}

/* ------------------------ */
img{
	border           :none;
	vertical-align   :middle;
	border-radius    :5px;
}

/* ------------------------ */
iframe{
	border           :none;
	display          :block;
	width            :100%;
	height           :100%;
}
/* ------------------------ */
a:link{
	color            :#00f;
	text-decoration  :none;
}

a:active{
	color            :#00f;
	text-decoration  :none;
}

a:visited{
	color            :#00f;
	text-decoration  :none;
}

a:hover{
	color            :#770;
	text-decoration  :underline dotted;
}

a:hover img{
	opacity          :0.5;
}

/* ------------------------ */
a.button1{
	margin           :0px 0px 0px 0px;
	padding          :4px 8px 2px 8px;
	color            :#000;
	background       :#eee;
	border           :2px #888 solid;
	border-radius    :5px;
	cursor           :pointer;
}

a.button1:hover{
	background       :#ccc;
	border           :2px #000 solid;
	text-decoration  :none;
}

/* ------------------------ */
a.button2{
	margin           :0px 0px 0px 3px;
	padding          :5px 8px 4px 8px;
	color            :#000;
	background       :#eee;
	border           :1px #888 solid;
	border-radius    :5px;
	cursor           :pointer;
}

a.button2:hover{
	background       :#bbb;
	text-decoration  :none;
}

/* ------------------------ */
input[type='text']{
	padding          :4px;
	font-size        :11pt;
	color            :#000;
	background       :#fff;
	width            :500px;
	border           :1px #bbb 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;
	filter           :alpha(opacity=60);
}

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

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

input[type='image']:hover{
	opacity          :0.5;
}

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

select:focus{
	background       :#ffc;
}

/* ------------------------ */
textarea{
	padding          :5px;
	width            :644px;
	height           :70px;
	resize           :none;
	font-family      :monospace;
	font-size        :15px;
	line-height      :140%;

	border           :3px #999 solid;
	color            :#fff;
	background       :#000;
	border-radius    :4px;
}

textarea:focus{
	background       :#444;
}

/* ------------------------ */
textarea.guest_comment{
	font-family      :"Meiryo",sans-serif;
	padding          :5px;
	width            :95%;
	height           :60px;
	resize           :none;

//	border           :1px #999 solid;
	color            :#000;
	background       :#ffe;
	border-radius    :4px;
}

textarea.guest_comment:focus{
	background       :#ffc;
}

/* ------------------------ */
table.note{
	width            :100%;
	border-collapse  :separate;
}

table.note th{
	padding          :3px 10px 0px 10px;
	color            :#fff;
	text-align       :left;
	border-radius    :3px;
	white-space      :nowrap;
	background       :linear-gradient(#777, #555);
}

table.note td{
	padding          :3px 0px 0px 10px ;
	vertical-align   :top;
	border-bottom    :1px #777 solid;
}

/* ----- table note0 ----- */
table.note0{
	border-collapse  :collapse;
	width            :660px;
}

table.note0 th{
	padding          :0px;
	white-space      :nowrap;
}

table.note0 td{
	padding          :0px;
}

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

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

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

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

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

table.note2 td{
	padding          :2px;
	vertical-align   :top;
	border-bottom    :0.5px #bbb solid;
	font-size        :12px;
}

/* ------------------------ */
div.drop_area{
	position         :relative;
	margin           :2px;
	padding          :2px;
	width            :614px;
	height           :120px;
	background       :linear-gradient(#eed, #ffe);
	border           :0.5px #886 solid;
}

/* ------------------------ */
div.comment_view_header{
	padding          :5px;
	color            :#000;
	background       :#eea;
	border-top       :0.5px #886 solid;
	border-bottom    :0px;
	border-left      :0.5px #886 solid;
	border-right     :0.5px #886 solid;
	border-radius    :5px 5px 0px 0px;
}

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

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

div.edit_button:hover{
	color            :#fff;
	text-shadow      :1px 1px 1px #555;
	background       :linear-gradient(#777, #bbb);
}

/* ------------------------ */
@media screen and (max-width:660px){
	#tree{width      :160px;}
	#main{width      :calc(100% - 160px);}

	.illust{width    :360px;}
	.video{width     :360px;}
	.editor{width    :336px;}
	textarea{width   :344px;}
	table.note0{width:350px;}
}