:root > * {
  --md-primary-fg-color:        #0072ce;
  --md-primary-fg-color--light: #71c5e8;
  --md-primary-fg-color--dark:  #003da5;
}

h1{
	font-weight: bold !important;
}

h2{
	font-weight: bold !important;
	border-bottom: solid 2px #333;
	padding: 5px;
}

h3{
    position: relative;
	background: rgba(0,114,206,0.7) !important;
	color: #fff;
	padding: 0.3em 1em;
	margin-bottom: 1.5em !important;
}

h3::after {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

h4{
	font-size: 120% !important;
	border-bottom: dotted 3px #666;
	padding: 0.3em 0.5em;
}

h5{
	font-size: 110% !important;
	color: #0072ce !important;
	padding: 0.2em 1em;
	border-left: 3px dotted #999;
}

h6{
	font-size: 100% !important;
	color: #000 !important;
}

h6::after{
	color: #000;
	content: "…………";
	font-weight: bold;
	padding-left: 10px;
}

a.md-top:hover{
	background: #0072ce !important;
}
.caution{
    position: relative;
    display: inline-block;
	margin: 10px 0px;
    width: calc(100%);
	padding: 3em 1em 1em 1em;
	border: solid 1px #dd4c53;
	border-left : 5px solid #dd4c53;
	box-sizing: border-box;
}

.caution::before{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
	font-size: 90%;
	padding: 0.3em 1em;
	content: "CAUTION\A";
    white-space: pre;
	background: #f5ccce;
	font-weight: bold;
    color:  #cf000a;
	box-sizing: border-box;
}

.caution ul{
	margin: 0px;
}

.caution ul li{
	margin: 5px 15px;
}

.note{
    position: relative;
    display: inline-block;
	margin: 10px 0px;
    width: calc(100%);
	padding: 3em 1em 1em 1em;
	border: solid 1px #ddd64c;
	border-left : 5px solid #ddd64c;
	box-sizing: border-box;
}

.note::before{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
	font-size: 90%;
	padding: 0.3em 1em;
	content: "NOTE\A";
    white-space: pre;
	background: #f5f3cc;
	font-weight: bold;
	color: #cfc400;
	box-sizing: border-box;
}

.note ul{
	margin: 0px;
}

.note ul li{
	margin: 5px 15px;
}

.tips{
    position: relative;
    display: inline-block;
	margin: 10px 0px;
    width: calc(100%);
	padding: 3em 1em 1em 1em;
	border: solid 1px #4cddd6;
	border-left : 5px solid #4cddd6;
	box-sizing: border-box;
}

.tips::before{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
	font-size: 90%;
	padding: 0.3em 1em;
	content: "TIPS\A";
    white-space: pre;
	background: #ccf5f3;
	font-weight: bold;
	color: #00cfc4;
	box-sizing: border-box;
}

.tips ul{
	margin: 0px;
}

.tips ul li{
	margin: 5px 15px;
}

.supplement{
    position: relative;
    display: inline-block;
	margin: 10px 0px;
    width: calc(100%);
	padding: 3em 1em 1em 1em;
	border: solid 1px #4c53dd;
	border-left : 5px solid #4c53dd;
	box-sizing: border-box;
}

.supplement::before{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
	font-size: 90%;
	padding: 0.3em 1em;
	content: "\SUPPLEMENT\A";
    white-space: pre;
	background: #cccef5;
	font-weight: bold;
	color: #000acf;
	box-sizing: border-box;
}

.supplement ul{
	margin: 0px;
}

.supplement ul li{
	margin: 5px 15px;
}

.example{
    position: relative;
    display: inline-block;
	margin: 10px 0px;
    width: calc(100%);
	padding: 3em 1em 1em 1em;
	border: solid 1px #b3b3b3;
	border-left : 5px solid #b3b3b3;
	box-sizing: border-box;
}

.example::before{
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc(100%);
	font-size: 90%;
	padding: 0.3em 1em;
	content: "EXAMPLE\A";
    white-space: pre;
	background: #e9e9e9;
	font-weight: bold;
	color: #939393;
	box-sizing: border-box;
}

.example ul{
	margin: 0px;
}

.example ul li{
	margin: 5px 15px;
}


.tag-gray{
	font-size: 80%;
	font-weight: bold;
	color: #fff;
	background: #999;
	padding: 2px 10px;
	border-radius: 3px;
}

.code{
	color: #333;
	background: #eee;
	padding: 15px;
	border-radius: 5px;
}

.option::before{
	font-size: 90%;
	content: "P/C";
	font-weight: bold;
	color: #fff;
	padding: 0.1em 0.6em;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(206,114,0,0.7);
}


.instance::before{
	font-size: 90%;
	content: "IM";
	font-weight: bold;
	color: #fff;
	padding: 0.1em 0.6em;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(114,206,0,0.7);
}

.command::before{
	font-size: 90%;
	content: "コマンド";
	font-weight: bold;
	color: #fff;
	padding: 0.1em 0.6em;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(114,206,0,0.7);
}

.recommend::before{
	font-size: 90%;
	content: "推奨";
	font-weight: bold;
	color: #fff;
	padding: 0.1em 0.6em;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(206,0,114,0.7);
}

.shortcut::before{
	font-size: 90%;
	content: "ショートカット";
	font-weight: bold;
	color: #fff;
	padding: 0.1em 0.6em;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(153,153,153,0.7);
}

.mouse::before{
	font-size: 90%;
	content: "マウス操作";
	font-weight: bold;
	color: #fff;
	padding: 0.1em 0.6em;
	margin-right: 10px;
	border-radius: 3px;
	background: rgba(153,153,153,0.7);
}

th{
	border: 1px solid #fff;
	background: #eee;
}


td:not(first-child){
	border-left: 1px solid #eee !important;
}

img{
	margin-top: 10px;
	margin-bottom: 15px;
}

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}

.tag-black {
	position: relative;
	display: inline-block;
	height: 28px;
	margin-left: 12px;
	font-size: 90%;
	padding: 0.1em 1em 0.1em 1.4em;
	color: #fff;
	background: #000;
}

.tag-black::before{
	position: absolute;
	top: 0;
	left: -12px;
	content: ' ';
	border-width: 14px 12px 14px 0;
	border-style: solid;
	border-color: transparent #000 transparent transparent;
}

.tag-black::after {
	position: absolute;
	top: calc(50% - 5px);
	left: -4px;
	width: 10px;
	height: 10px;
	content: '';
	border-radius: 50%;
	background: #fff;
}