design.css

@charset "UTF-8";

/* 共通部分 */
html{
  font-size: 100%;
  width: 100%;
  height: 100%;
  word-break: break-all;
  /*scroll-behavior: smooth;*/
}

body{
	font-size: 14px;
	color: #000000;
	font-family: sans-serif;
	margin: 4px;
	padding: 4px;
}

h1 {
	font-size: x-large;
	color: #0080FF;
	font-family: sans-serif;
	font-weight: normal;
}

h2 {
	font-size: medium;
	color: #000088;
	font-family: sans-serif;
	font-weight: bold;
	text-decoration:underline;
}

h3 {
	font-size: medium;
	color: #000088;
	font-family: sans-serif;
	font-weight: bold;
}

h4 {
	/*font-size: small;*/
	color: #000088;
	font-family: sans-serif;
	font-weight: bold;
}

h5 {
	/*font-size: small;*/
	color: #000000;
	font-family: sans-serif;
	font-weight: bold;
}

p{
	/*font-size: small;*/
	color: #000000;
	font-family: sans-serif;
	margin: 6px 0px 6px 0px;
}

ul {
	/*font-size:small;*/
	font-family: sans-serif;
	list-style-position: outside;
	list-style-type: disc;
	padding: 5px 0 5px 20px;
}

ol{
	list-style-position: outside;
	padding: 0 0 0 40px;
}

pre{
  max-width: 100%;
  display:block;
  padding:4px;
  margin:0 0 10px;
	
  /* prettify.css 中の font-size とそろえる目的で、"font-size:14px" を指定 */
  font-size:14px;
  font-family:monospace;
  line-height:1.42857143;
	
  color:#000;
  word-break:break-all;
  word-wrap:break-word;
  background-color:#f5f5f5;
  border:1px solid #ccc;
  border-radius: 4px;
  /*overflow-x: scroll;*/
  overflow-y: auto;
}

code{
  /* prettify.css 中の font-size とそろえる目的で、"font-size:14px" を指定 */
  font-size:14px;
  font-family:monospace;
}

div {
  max-width: 100%;
}

table{
  max-width: 100%;
}

caption{
  text-align: left;
}

th{
  padding: 0.5em 1.0em;
  text-align:left;
}

td{
  padding: 0.5em 1.0em;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}

video{
  max-width: 100%;
  max-height: 80%;
  border: thin solid #C0C0C0;
}

img{
  max-width: 100%;
  height: auto;
}

/*
===
img（図）の飾り
===
*/
img.border{
	border:1px silver solid;
}

img.border_with_drop-shadow{
	border:1px silver solid;
	box-shadow: 4px 4px 8px gray;
}


/* 目次 */
div.mokuji{
  border: 1px solid #808080;
  width: 800px;
  max-width:100%;
  background-color: #F0F0F0;
  padding: 7px 14px;
}

/* ライセンス */
div.license{
  width: 600px;
  background-color: #F0F0F0;
	border: thin silver solid;
  word-break: break-word;
  padding: 7px 14px;
}


/*
===
MessageBox っぽいやつ
===
*/

div.status_information{
  background-color: #DEEBFF;
  border: thin solid cornflowerblue;
}

div.status_warning{
  background-color: #FFFAE6;
  border: thin solid gold;
}

div.status_invalid{
  background-color: #FFEBE6;
  border: thin solid indianred;
}

div.status_ok{
  background-color: #E3FCEF;
  border: thin solid green;
}

div.status_information div:first-child{
  background-image:url('Images/StatusInformation.svg');
}

div.status_warning div:first-child{
  background-image:url('Images/StatusWarning.svg');
}

div.status_invalid div:first-child{
  background-image:url('Images/StatusInvalid.svg');
}

div.status_ok div:first-child{
  background-image:url('Images/StatusOK.svg');
}

div.status_information,
div.status_warning,
div.status_invalid,
div.status_ok
{
  width: 600px;
  border-radius: 5px;
  display: flex;
}

div.status_information div:first-child,
div.status_warning div:first-child,
div.status_invalid div:first-child,
div.status_ok div:first-child
{
  width: 48px;
  height: 48px;
  margin: 0.5rem;
  background-size: contain;
  background-repeat: no-repeat;  
}

div.status_information div,
div.status_warning div,
div.status_invalid div,
div.status_ok div
{
  width: 100%;
  padding: 0.5rem;
}


/* <blockquote> */
blockquote{
  background-color: #fafafa;
  color: #555;
  border-left: solid 8px #e0e0e0;
  border-left-width: 8px;
  margin: 2em 0;
  margin-top: 2em;
  padding: 1em;
  font-size: 95%;
    
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  /*margin-inline-start: 20px;*/
  /*margin-inline-end: 20px;*/
}

/* class "cpp-source" */
.cpp-source{
	display: inline;
	padding: 0px 1px 0px 1px !important;
	margin: 0px 1px 0px 1px !important;
	line-height: 1.42857143;
	color: #0000CC;
	background-color: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 4px;
}


/*
===
開発環境のバージョン情報記載用
===
*/
td:first-child{
	padding-left:1em;
	padding-top:0.5em;
	padding-right:1em;
	padding-bottom:0.5em;
	/*white-space: nowrap;*/	/* 改行禁止 */
}

td:nth-last-child(2){
	padding-left:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

td:nth-last-child(1){
	padding-left:1em;
	padding-right:1em;
	padding-top:0.5em;
	padding-bottom:0.5em;
	text-align:left
}

.td_separate{
	padding:0 !important;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#cccccc;
}

/*
===
変更履歴用
===
*/
.td_history_date{
	text-align: left;
	vertical-align:top;
	padding:0px !important;
	/*padding-bottom:0px !important;*/
	white-space: nowrap;	/* 改行禁止 */
}

.td_history_separator{
	text-align:center;
	vertical-align: top;
	padding: 0px 0.5ex !important;
}

.td_history{
	text-align: left;
	vertical-align: top;
	padding: 0 1ex 0 0 !important;
}


/*
===
シンプルな表を作成用
===
*/
table.border-collapse{
	border-collapse:collapse;
	border: thin silver solid;
}

thead.standard_table{
	background-color:#eeeeee;
}

tbody.standard_table{
	background-color:white;
}

td.standard_table{
	border:1px silver solid;	
}


/* モバイル版 */
@media (max-width: 600px){
  body{
  	/*font-size: medium;*/
  }
}