@charset "utf-8";
/*-----------------------------------
   気まぐれ日記用スタイルシート
-------------------------------------*/

/*---通常画面--------------------*/
BODY {
	background-color : #f7fa7a;
	background-size:8px 8px;
	background-image : linear-gradient(white 0px, #f7fa7a 4px, #f8f9ae 7px);
	background-repeat : repeat;background-position : 8px 10px;
}
DIV.all {
	font-size : 16px;
}

DIV.diary_area {
	margin : 0;
	padding : 5px;
	width : 100%;
	color : black;
}

DIV.diary_grp {
	flex-flow : row nowrap;*/
	margin : 20px 0 5px 0; /*0.2em 0 0.2em 0;*/
	padding : 0.3rem;
	background-color : #F7C4B7;
	border-radius : 0.5em;
	box-shadow : 5px 5px 5px rgba(0,0,0,0.5);
}

IMG.img_icon {
	text-align:left;
}

UL.diary_cont_grp {
	display : inline-flex;
	flex-flow : wrap;
	margin : 0;
	padding : 0;
	width : calc(100% - 40px);
	box-shadow : 3px 3px 3px rgba(0,0,0,0.5), -2px -2px 2px rgba(0,0,0,0.6) inset;
	list-style: none;
	text-align:right;
	border-radius : 0.5em;
	border : 1 solid;
}

LI.diary_cont {
	display : inline-box;
	padding : 0;
	margin : 0;
}

/*タイトル部分*/
LI.diary_cont:nth-child(1) {
 	width : 70%;
	padding : 0.5rem;
	background-color : #9ACD32;
	background-image : linear-gradient(#9ACD32 20%, #beee81 25%, #9ACD32 50%, #9ACD32 60%, #89c242 85%);
	border-radius : 0.5em 0 0 0 ;
	font-size : 1.3rem;
	text-align : left;

	font-weight : 800;
	color : #ff6699;
	text-shadow : 0 0 4px white;

}

/*日付部分*/
LI.diary_cont:nth-child(2) {
	width : calc(100% - 70%);
	padding : 0.5rem;
	background-color : #9ACD32;
	background-image : linear-gradient(#9ACD32 20%, #beee81 25%, #9ACD32 50%, #9ACD32 60%, #89c242 85%);
	border-radius : 0 0.5em 0 0 ;
	position: relative;
}
/*メッセージエリア*/
LI.diary_cont:nth-child(3) {
	font-size : 1.2rem;
	width : 100%;
	padding : 0.5em 1.5em;
	line-height : 1.8em;
	background-color : white;
	border-radius : 0 0 0.5em 0.5em;
	text-align : left;
}

SPAN.diary_date {
	font-size : 0.9rem;
	padding : 0.1rem;
	color : white;
	text-shadow : 0 0 3px black;
	position: absolute;
	right: 0;
	bottom: 0;
}

/*ページボタン*/
DIV.pg_btn {
	display : block;
	margin : 0;
	padding : 3px;
	background-color : #FFE4B5;
	border-top : 3px double #FF8C00;
	border-bottom : 3px double #FF8C00;
}

INPUT.pg_btn {
	display : inline-block;
	margin : 0;
	padding : 1px;
	width : 28px;
	height : 28px;
	color : #ED7248;
	border : 1px solid #ED7248;
	border-radius : 5px;
	background-color : white;
	font-size : 0.8rem;
	font-weight : 800;
}

INPUT.pg_btn:hover {
	position : relative;
	left : -1px;
	top : -1px;
	box-shadow : 1px 1px 2px black;
	color : white;
	background-color : #ED7248;
	border-color : #D8521E;
	background-image : linear-gradient(#ED7248 5%, #F7CA79 25%, #F7CA79 40%, #ED7248 60%, #D8521E 85%);
}

INPUT.pg_btn:active {
	position : relative;
	left : 1px;
	top : 1px;
	box-shadow : -1px -1px 2px black;
}

SPAN.pg_btn {
	display : inline-block;
	margin : 0;
	padding : 1px;
	width : 28px;
	height : 28px;
	line-height : 28px;
	border : 1px solid #D8521E;
	border-radius : 5px;
	color : white;
	background-color : #ED7248;
	font-size : 0.8rem;
	text-shadow : 1px 1px 2px black;
	background-image : linear-gradient(#ED7248 5%, #F7CA79 25%, #F7CA79 40%, #ED7248 60%, #D8521E 85%);
}

/* 過去・現行日記ボタン */
DIV.kako_area {
	margin : 0;
	padding : 3px;
	width : 100%;
	text-align : center;
}

INPUT.kako {
	margin : 0;
	padding : 5px 0.5em;
	width : 8em;
	font-weight : bold;
	color : #ED7248;
	background-color : white;
	border : 3px double #ED7248;
	border-radius : 2em;
}

INPUT.kako:hover, INPUT.kanri_btn:hover {
	position : relative;
	left : -1px;
	top : -1px;
	color : white;
	background-color : #ED7248;
	border-color : white;
	box-shadow : 1px 1px 2px black;
}

INPUT.kako:active, INPUT.kanri_btn:active {
	position : relative;
	left : 1px;
	top : 1px;
	box-shadow : -1px -1px 2px black;
}

/* 管理モード */
DIV.kanri_area {
	width : 100$;
	margin : 0;
	padding : 0;
	border-top : 1px solid #ED7248;
	border-bottom : 1px solid #ED7248;
	text-align : right;
	height : 3em;
	line-height : 3em;
}

FORM.kanri_form {
	display : inline-block;
	margin : 0;
	padding : 0;
}

INPUT.kanri_btn {
	width : 7em;
	margin : 0;
	padding : 3px 0.5em;
	height : 100%;
	color : #ED7248;
	border : 2px solid #ED7248;
	border-radius : 2em 0 0 2em;
	background-color : white;
}

INPUT.kanri {
	width : 10em;
	margin : 0;
	padding : 2px 0.5em;
	height : 100%;
	border : 2px solid #ED7248;
	border-radius : 0 2em 2em 0;

}

/*---- 管理画面投稿用 ----------*/
DIV.form_all {
	margin : 0;
	padding : 0.5rem;
	width : 100%;
}

DIV.form_cap {
	width : 100%;
	background-color : #ED7248;
	color : white;
	text-shadow : 1px 1px 2px black;
	border-radius : 5px;
	border : 1px solid #FC400C;
	font-size : 1.2rem;
	font-weight : bold;
	background-image : linear-gradient(#ED7248 5%, #F7CA79 25%, #F7CA79 40%, #ED7248 60%, #D8521E 85%);
	box-shadow : 2px 2px 2px black;
	padding : 3px 10px;
	margin : 0 auto;
}

UL.form_grp {
	display : table;
	flex-flow : row wrap;
	margin : 0 auto;
	padding : 0;
	width : 100%;
	text-align : left;
	list-style : none;
}

UL.form_grp > LI.form_tr {
	display : table-row;
	padding : 0;
	margin : 0;
}

UL.form_grp > LI > DIV {
	padding : 3px 5px;
	margin : 0;
	display : table-cell;
}

DIV.form_th {
	background-color : #ED7248;
	border : 1px solid #FC400C;
	color : white;
	text-shadow : 0px 0px 4px black;
	border-radius : 5px 0 0 5px;
	font-weight : bold;
	box-shadow : 2px 2px 2px black;
	vertical-align : top;
}

DIV.form_td {
	background-color : #ffccff;
	color : #ff0066;
	text-shadow : 0px 0px 4px #FF69B4;
	border : 1px solid #FC400C;
	border-radius : 0 5px 5px 0;
	box-shadow : 2px 2px 2px black;
}

DIV.form_btn {
	width : 100%;
	padding : 3px;
	margin : 0 auto;
	text-align : center;
	border-radius : 5px;
	border : 2px solid #FC400C;
	box-shadow : 2px 2px 2px black, 1px 1px 1px rgba(255,255,255,0.5) inset, -1px -1px 1px rgba(0,0,0,0.5) inset;
	background-color : #ED7248;
	margin-bottom : 1rem;
}

DIV.face_grp {
	display : flex;
	flex-flow : row nowrap;
	margin : 0;
	padding : 5px;
}

DIV.face_li {
	display : block;
	margin : 0;
	padding : 3px;
	width  : 40px;
	text-align : center;
}

IMG.face {
	width : 100%;
	height : auto;
}

INPUT.input_date {
	margin : 0;
	padding : 3px 1em;;
	width : 10rem;
	border-radius : 0 1em 1em 0;
	border : 1px solid #ED7248;
}

INPUT.inp2 {
	margin : 0;
	width : 100%;
	padding : 2px 1em;
	background-color : #ffccff;
	border-radius : 0 1em 1em 0;
	border : 1px solid #ED7248;
}
INPUT.inp {
	margin : 0;
	padding : 3px 1em;;
	width : 100%;
	border-radius : 0 1em 1em 0;
	border : 1px solid #ED7248;
}

SELECT.sel {
	margin : 0;
	padding : 3px 1em;;
	width : 8em;
	border-radius : 1em;
	border : 1px solid #ED7248;
}

TEXTAREA.text {
	margin : 0;
	padding : 3px 1em;;
	width : 100%;
	height : 8em;
	border-radius : 5px 5px 5px 5px;
	border : 1px solid #ED7248;
}

SPAN.link {
	color : #426EDD;
	text-shadow : 0 0 4px white;
	font-size : 0.8rem;
}

/* 管理画面一覧表示用 */
UL.ichiran_area {
	display : block;
	margin : 0;
	padding : 0 0.5rem;
	width : 100%;
	font-size : 0.8rem;
}

UL {
	list-style : none;
}


/* 記事の１グループ */
UL.ichiran_grp {
	display : flex;
	flex-flow : row nowrap;
	margin : 4px 0 6px 0;
	padding : 0.5em;
	width : 100%;
	background-color : #F7C4B7;
	border-radius : 1em;
	box-shadow : 5px 5px 5px rgba(0,0,0,0.5);
}

LI.ichiran_line {
	display : block;
	margin : 0;
	padding : 3px;
}

/* Iconと削除用ラジオボタン */
LI.ichiran_line:nth-child(1) {
	width : 40px;
}
/* 記事と書込みの情報 */
LI.ichiran_line:nth-child(2) {
	width : calc(100% - 40px);
	text-align : left;
}

/* 書込みの情報表示グループ */
UL.ichiran_koumoku {
	display : flex;
	flex-flow : row wrap;
	margin : 0;
	padding : 3px;
	width : 100%;
}

LI.ichiran {
	display : block;
	margin : 2px 0 0 0;
	padding : 5px;
/*	height : 4em;*/
}

/*UL.ichiran_koumoku > LI:nth-child(n+5) {
	height : 8em;
}*/

LI.ichiran:nth-child(odd) {
	width : 19%;
	background-color : #0099ff;
	color : white;
	border : 1px solid #3366ff;
	border-radius : 0.5em 0 0 0.5em;
	text-align : center;
	font-weight : bold;
/*	line-height : 3em;
	margin-right : 1px;*/
}

LI.ichiran:nth-child(even) {
	width : 31%;
	border : 1px solid #3366ff;
	border-radius : 0 0.5em 0.5em 0;
	overflow : auto;
	background-color : white;
}

UL.kiji_grp {
	clear : both;
	display : block;
	margin : 0;
	padding : 3px;
	width : 100%;
/*	font-size : 18px;*/
}

LI.kiji {
	display : block;
	margin : 0;
	width : 100%;
	box-shadow : 3px 3px 5px rgba(0,0,0,0.5);
	font-size : 1rem;
}

LI.kiji:nth-child(odd) {
	padding : 0.5em 1em;
	color : white;
	border-radius : 0.5rem 0.5rem 0 0;
	background-color : #9ACD32;
	background-image : linear-gradient(#9ACD32 20%, #beee81 25%, #9ACD32 50%, #9ACD32 60%, #89c242 85%);
	font-weight : 900;
	text-shadow : 1px 1px 2px black;
}

LI.kiji:nth-child(even) {
	clear : both;
	padding : 3px 0.5em;;
	border-radius : 0 0 1em 1em;
	background-color : white;
	line-height : 1.5rem;
}


/*-- タグ表示CGI用 --*/
DIV.tag_area {
	display : block;
	width : 100%;
	margin : 0 auto;
	padding : 0.2em;
}

DIV.tag_cap {
	width : 100%;
	padding : 0.5em;
	margin : 0 auto;
	background-color : #ED7248;
	color : white;
	text-shadow : 1px 1px 2px black;
	border-radius : 2px;
	font-size : 1.4rem;
	font-weight : bold;
	background-image : linear-gradient(#ED7248 5%, #F7CA79 25%, #F7CA79 40%, #ED7248 60%, #D8521E 85%);
	box-shadow : 2px 2px 2px black;
}

UL.tag_grp {
	list-style : none;
	display : flex;
	flex-wrap: wrap;
	margin : 0 auto;
	padding : 3px;
	text-align : left;
	font-size : 1.2rem;
	width : 100%;
}

LI.tag {
	display : inline-block;
	margin : 0;
	padding : 0.2em;
	border : 1px solid navy;
	line-height : 1.2em;
	box-shadow : 2px 2px 4px black;
}

LI.tag:nth-child(2n+1) {
	width : 8em;
	font-weight : bold;
	color : white;
	text-align : center;
	border-radius : 0.2em 0 0 0.2em;
}

LI.tag:nth-child(2n) {
	width : calc(100% - 8.5em);
	font-weight : bold;
	color : black;
	border-radius : 0 0.2em 0.2em 0;
}

LI.tag:nth-child(1) {
	background-color : #285294;
}

LI.tag:nth-child(2) {
	background-color : #99ccff;
	text-align : center;
}

LI.tag:nth-child(2n+3) {

	background-color : #0069A3;
	/*border-radius : 3px;*/
}

LI.tag:nth-child(2n+4) {
	background-color : white;
}

video {
	float:right;
	width : 320px;
	height : auto; /* 高さは自動調整してアスペクト比を維持 */
}

audio {
	float :right;
	width : 400px;
	max-width: 3200px;
}

.media_error {
	color : white;
	background-color : red;
	padding : 1em;
}