@charset 'UTF-8';

.border-box {
	box-sizing: border-box;
}

div.my_page {
	position : relative;
	width : 95%;
	margin : 0 auto;
}

div.my_header {
	width : 100%;
}

div.my_header div.message_status {
	clear : both;
}

div.my_content {
}

div.mekiku_link {
	text-align : right;
	padding : 0 0 4px 0;
	margin : 0.5em 0 0.4em 0;
	line-height : 250%;
}

/*
div.mekiku_link span {
	background-color : #f94;
}
*/

div.my_navigation {
	text-align : right;
}

div.my_navigation a {
	margin : 0.2em 0 0 0;
	padding : 1px 5px;
	border-color : #eee;
	border-width : 2px;
	border-style : outset;
	background-color : #ffc;
	text-decoration : none;
	line-height : 220%;
}

div.my_navigation a:hover {
	color : red;
	background-color : #fc9;
}

div.my_footer {
	clear : both;
	width : 100%;
	text-align : center;
	font-size : small;
	padding: 0 0 0 0;
}

div.my_footer p {
	border-top: 1px solid black;
	padding: 0 0 0 0;
}

body {
	font-family: sans-serif;
	font-size: medium;
	line-height: 130%;
	background-color: #fdb;
}

body.editor {
	background-color: #ffe;
}

body.admin {
	background-color: #fef;
}

h1, h2, h3, h4, h5, h6 {
	font-size: large;
	font-color: black;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 4px;
	text-align: left;
}

h1 {
	margin : 0px;
	padding : 5px 5px 5px 10px;
	font-size : large;
	border-bottom : 2px #699 solid;
/*	border-left : 20px #699 solid; */
	line-height : 100%;
	clear : both;
}

h1:before {
	content: url(icon.png);
}

/* h1.image :
  Use for the top page in which a logo would be a top header. */

h1.image {
	border-bottom : 0px;
}

h1.image:before {
	content: '';
}

h2 {
	padding : 10px 10px 5px 10px;
	text-align : left;
	font-size : large;
	border-bottom : 2px #699 solid;
/*	border-left : 10px #9cc solid; */
/*	background-color : #cfc; */
	clear : both;
}

h2:before {
	content: url(icon.png);
}

h3 {
/*	padding : 10px 10px 5px 10px; */
	padding : 2px 12px 2px 10px;
	text-align : left;
	font-size : medium;
/*	border-bottom : 1px #9cc solid; */
	border-left : 10px #699 solid;
}

h4, h5, h6 {
	border-bottom: 1px solid gray;
}

h2 a {
	text-decoration : none;
}

p {
	font-size: medium;
	padding-top: 2px;
	padding-bottom: 2px;
}

li {
	padding-top: 2px;
	padding-bottom: 2px;
}

strong {
	font-weight: bold;
	color: red;
}

blockquote {
	border: 1px solid black;
	padding: 0.5ex 1em;
}

/* from: https://qiita.com/RinoTsuka/items/4a4f78a41f598e0117e6 , https://chienomi.org/articles/technology/201910-web-font-settings.html*/
pre, code, var, samp, kbd, .mono {
	font-family: 
			"SourceHanCodeJP-Regular",
			'Source Han Code JP', 
			"M+ 1m",
			"Rounded M+ 1m regular",
			"Rounded M+ 2m regular",
			"Rounded Mgen+ 1m regular",
			"Rounded Mgen+ 2m regular",
			"Yutapon coding Regular",
			"Myrica M",
			"MyricaM M",
			"Ricty Diminished Discord",
			"Ricty Diminished",
			"Migu 1M",
			"Migu 2M",
			'VLGothic', 
			"VL ゴシック",
			'Operator Mono', 
			'monofur', 
			'Hermit', 
			'Input Mono Compressed', 
			'Fira Mono Condensed', 
			'Fira Code Condensed', 
			'mononoki', 
			'agave', 
			'Monoid', 
			'Cica', 
			'Menlo', 
			'Meslo LG S', 
			'Monaco', 
			'Ricty', 
			'Consolas', 
			'Inconsolata', 
			"MeiryoKe_Gothic",
			monospace;
	font-size: medium;
}

pre.code {
	white-space: pre-wrap;
	border: 1px solid black;
	background-color: white;
	padding: 0.5em;
}

p.last_modified {
	font-size: small;
	font-color: #ccc;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.footer p {
	border-top: 1px solid black;
	text-align: center;
	font-size: small;
	padding: 0 0 0 0;
}

div.index_subcontent {
	margin-left: 5%;
}

div.box {
	margin: 1em 3% 1em 3%;
	padding: 4px;
	border: 1px solid gray;
}

.invisible {
	display: none;
}

img.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align: center;
}

span.highlight {
	background-color: #cff;
	color: black;
}

.errormsg {
	margin: 4px 10%;
	padding: 4px;
	border: 2px solid red;
	background-color: fdd;
	color: red;
	font-weight: bold;
	font-size: medium;
	text-align: center;
}

.notice {
	margin-right: 5%;
	margin-left: 5%;
	margin-top: 10px;
	border-width: 1px;
	border-color: #666;
	border-style: solid;
	padding-right: 4px;
	padding-left: 4px;
}

.status {
	text-align: right;
}

.error {
	font-size: medium;
	font-weight: bold;
	color: red;
	vertical-align: middle;
}

.center {
	text-align: center;
}

/* flexbox */

div.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-start;
	align-content: space-between;
}

div.flex-item {
	flex-grow: 0;
}

div.flex-multiline {
	margin-bottom: 1em;
}

/* ボタンっぽい領域を作る */

.largebutton {
	background : #ffcc99;
	border-radius : 6px;
	border : 2px #aa6633 solid;
	padding : 0.2em 0.5em;
}

.largebutton:hover {
	background : #ffff99;
}

a.no_underline {
	text-decoration : none;
	font-weight : bold;
}

/* ■フォーム */

input , textarea , select {
	font-size: medium;
}

input , select , form div {
	vertical-align: middle;
}

.formsubitem {
	margin-top : 0.5em;
	margin-bottom : 0.5em;
	margin-left: 2%;
}

/* ■テーブル */

table {
	border-collapse: collapse;
	empty-cells: show;
}

table.fullwidth {
	border: 1px black solid;
	width: 100%;
}

table.fullwidth tr,th,td {
	border: 1px black solid;
}

th,td {
	padding: 2px 4px 2px 4px;
}

tr.odd {
	background-color: #eee;
}
tr.even {
	background-color: #ddd;
}