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

h1 {
	font-weight: bold !important;
	text-align: center;
}

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;
}

.md-grid {
  max-width: 1440px; 
}

.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);
}

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

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

li img{
float: left;
margin-right: 10px;
}

li{
clear: both;
}

.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%;
}




.hotspot {
      position: absolute;
      display: block;
      background: rgba(0,0,0,0); /* 初期は透明 */
      transition: background 0.2s ease;
    }
    .hotspot:hover {
      background: rgba(0,128,255,0.3); /* ハイライト */
    }

.hotspot.polygon {
  clip-path: polygon(
    120px 70px,  /* 頂点1 */
    950px 70px, /* 頂点2 */
    950px 330px, /* 頂点3 */
    820px 330px, /* 頂点4 */
    820px 430px,/* 頂点5 */
    0px 430px, /* 頂点6 */
    0px 150px,  /* 頂点7 */
    120px 150px    /* 頂点8 */

  );
}